styling of header

wienalin · August 2016

Hello!

I'm trying to change the padding around the logo in my header so that the menu items are in a single line with the logo unless the menu is minimized into a hamburger. Currently, the text drops to a second line below the header bar when the browser window is narrower.

I've tried changing the CSS but haven't had the right results—it'd be very helpful to have suggestions on the specific code I should use.

http://reify.nyc/home-v11/

Thanks in advance for your help!

Albert · August 2016

Hi,

can you explain where the menu exactly is? We did checked your site and menu definitely does not exist what you can see on http://pasteboard.co/651RkqyAW.png

wienalin · August 2016

Essentially, I'd like for the menu to be displayed for narrower screens as well before it becomes the hamburger. I changed the responsive settings in Appearance > Responsive > General so that the Responsive Menu Initial Width is 900px but it looks like the padding around the logo is pushing the navigation links below the header.

https://www.evernote.com/l/AISvLslxXE5H7rqm7f2apwt_zvaiwqtv7uk

Albert · August 2016

Sure, we got it but we need this menu to be active on your site because it's currently not. It just doesn't exist or larger and even smaller screens.

wienalin · August 2016

Got it—here's the new link where the menu should be activated:

http://www.box.bentodev.com/home-v6/

Albert · August 2016

As we can see, the header is minimal already and doesn't look like on the screenshot you left above.

wienalin · August 2016

Hi, sorry about the confusion—please see this link instead:

http://reify.nyc/

Albert · August 2016

Ok, thanks. We checked your site and there is no way to decrease logo padding. But about menu items, we didn't found anything like on your screenshot. http://pasteboard.co/6XG6EYLSU.png - this is how it looks like on our demo. We checked different browsers and screen resolutions of course.

wienalin · August 2016

I think the menu items only fall out of the menu if the screen size is below 1240px so I have the responsive resolution set to 1240 now. Graphically, the menu items should all fit even if the browswer window is 900px.

Would it be possible to decrease the padding on the menu items, especially the padding on the sides of the logo?

Albert · August 2016

To decrease padding between menu items, you need to use:

#Top_bar .menu > li > a span:not(.description) { padding: 0 10px !important; }

styling of header

Comments