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.
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;
}
}
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.
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.
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:
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.
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.
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
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.
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
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?
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
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.
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