Hi there
I would like to bring down the menu a little so it is lined out with the text in the logo
The menu is in a widget
What css can I use for the padding ?
And please can I transform the menu widget into a responsive menu ( ‘hamburger’) with css ?
(How I wish I could do this myself in the css editor but that still does not work : ( )
Thanks
JvanBavel
Hi Jvanbavel
Thanks for reaching out. You could try the following:
/* Header Sidebar */ #header-sidebar { margin-top: 10px; }The header widget area, custom menu widget, doesn’t have a mobile menu attached to it. I’d recommend switching over to the Logo in Menu layout from Appearance > Theme Settings > Layout and then using to Appearance > Customize > Theme Design > Menu to adjust the colors as required.
Kind Andrew
I tried that but the logo then lines out above the menu and that is not the intention
If you have a sloution for that as well ?
REgards
JvanBavel
To get the responsive menu working you’d need to shift this over to the Logo in Menu masthead. Once that’s done we could help with any further adjustments required.
It sounds like you just need to reduce the main menu item padding after changing the masthead layout:
/* Menu Padding Horizontal */ .main-navigation ul li a { padding-right: 25px; padding-left: 25px; }Adjust as required.
Hi Andrew
yes i did not want to show to the owner of the website the ugly lay out with logo high and menu low ; )
So i did that now
And brought back the padding to 15 ( less is not good)
Also I removed the ‘search’ to give it more space but still the logo is high and menu low.
Appreciate help
Thanks
JvanBavel
Perhaps we can make the header a bit wider ?
If that solves the problem ?
n.b. i have put back the search button since it made no difference for the lay out : )
You can try the following at Appearance > Custom CSS:
/* Header Width */ body.responsive.layout-full #page-wrapper #masthead .full-container { max-width: 1200px; }Adjust as required.
Hi Andrew
I found the mistake
Actuall;y there are 2 places where you can upload the logo and mine was uploaded in Customizer.
There it is put in a seperate row and whatever you do the logo wil stay hovering above the mennu
So I took it out and placed it again but this time with the Theme Settings and voila.
It s a pity that placing the menu with header widget is not yet responsive cause that actually worked really well as a lay out.
Thanks again for the assist.
JvanBavel
ps in the Iphone I still do not get the so wanted hamburger menu ? And yes I ticket the box Responsive Layout
Scale your layout for small screen devices.
How is that possible ?
Scusi for yet more questions ; )
JvanBavel
Glad to hear you’re making progress and for your feedback.
Appearance > Theme Settings > Navigation > Mobile Menu Collpase is set to 0. It’ll never collapse as no viewport is 0 pixels wide. Try 480 or upwards. 780 if you want to initiate for tablet portrait. 1024 for tablet landscape.
Hope that helps :)
Hi there Andrew
Yeah that helped ; )))))))
I also can finetune the menu in all directions now so thats cool
Awesome, glad to hear you made progress :)