Primary Menu | PenciDesign Support

PenciDesign replied

6 years ago

Staff Reply

Hi,

You can try add more this code to Customize > Custom CSS to make the topbar display center:

@media only screen and (min-width: 961px){
.penci-top-bar{ text-align: center; }
ul.penci-topbar-menu ul.sub-menu, div.penci-topbar-menu > ul ul.sub-menu{ text-align: left; }
.penci-topbar-social{ float: none; margin-left: 20px; }
}

Best Regards,

PenciDesign

pakashastra replied

6 years ago

Customer Reply

WOW! thank you for this great advice! Made that change. Could you also tell me how to move topbar a little to the centre to align with the Primary Menu such that the top bar view does not affect the mobile view.

PenciDesign replied

6 years ago

Staff Reply

Hi,

I see you're using a padding value is 400px - it will make your menu display bad on tablet or mobile.

If you want to do something like that, I recommend you use Header Style 5 ( Customize > Logo and Header Options > Header Layout ) to make it display center and good for tablet & mobile.

And add more this code to Customize > Custom CSS to make the logo arena display full width:

#header .inner-header .container{ width: 100%; }

Note: Let's remove the Custom CSS code:

#navigation{ padding: 0 400px; }

Best Regards,

PenciDesign

pakashastra replied

6 years ago

Customer Reply

Great! this works! I'm so glad to have chosen theme, your support is amazing!

Could you please tell me the code for similar padding for the topbar?

PenciDesign replied

6 years ago

Staff Reply

Hi,

1/ If so, please try replace the code I sent to this code:

#navigation{ padding: 0 10px; }

Change value 10 to value as you want.

2/ To do that, please go to Appearance > Menus > make a "Blog Events" menu item like this image and replace with your currently "Blog Events" menu item.

Best Regards,

PenciDesign

pakashastra replied

6 years ago

Customer Reply

Thank you for your response.

1) This works for mobile device display. However, I need this setting on laptop. Please let me know the custom code for laptop.

2) This works great! I have another question on this. On my laptop, when I click on Blog Events on topbar, I dont want that parent page to display. I want only the sub-menu page to be displayed. Eventually there might be more events added as submenu.

PenciDesign replied

6 years ago

Staff Reply

Hi,

1/ Please try add more this code to Customize > Custom CSS to do that:

@media only screen and (max-width: 960px){
#navigation .container{ padding: 0 50px; }
.show-search{ margin: 0 50px; width: calc(100% - 100px); }
}

2/ I didn't see any "Blog" event on your topbar menu. Also, if you want to show child menu items on topbar on the mobile, please try add more this code to Customize > Custom CSS:

@media only screen and (max-width: 960px){
ul.penci-topbar-menu li:hover > ul.sub-menu, div.penci-topbar-menu > ul li:hover>ul.sub-menu {
    display: block;
    z-index: 100;
}
}

Best Regards,

PenciDesign

pakashastra started the conversation

6 years ago

Conversation Start

Need help on the following:

1) The primary menu on my page is left aligned. I would like for it to be in the centre or have some space on the left. Also, the search icon is way to the right, I would like for it to be a little inward.
2) On the topbar, Blog events is the parent page. I want only the child page under it to display and not the parent page. Also, this child page does not show up on mobile while it shows on laptop.