Responsive Menu

andreasconow · June 2018

Hi guys,

great theme!

I´m having a little issue with the menu size on laptop screens.

I use the fixed menu with 7 menu items in one row. Desktop version works fine, on mobile devices the menu is faded out.

Now on desktop screens the 7 items are too big and the whole row is shifted downwards under the logo.

Is there some CSS to change the menu item padding left right or even better the font size for the menu items, but only for certain screen sizes between lets say 768 px and 1049 px?

Thanks

andreasconow · June 2018

picture of the laptop screen: menu items shifted downwards:

andreasconow · June 2018

I checked different screen sizes and the problem occurs only with sizes < 900px so I would need CSS for changing menu item size or menu item font size for screens from 768px to about 899 px.

Thanks

Pablo · June 2018

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

andreasconow · June 2018

Hi, the page will still be offline for a few weeks, so here are the screenshots:

1. desktop (1050px) - everything fine - menu and logo in one row

https://pasteboard.co/HqMtkW3.png

2. laptop (768px) - menu too big and shifted downwards

https://pasteboard.co/HqMuhRA.png

How can I change the item size or font size of the menu (for screens between 768 and 900 px only) to always have it in one row with the logo?

Thanks

Pablo · June 2018

Hi,

It can be done in two ways

1) Decrease number of items in menu by adding few of them in submenu.

2) Custom CSS decreasing font-size or paddings but i do not recommend this option.

Thanks.

andreasconow · June 2018

ok thanks can you send me custom css to decrease the font-size please - for screens vrom 768 to 900 - just to try it out?

if it doesnt work I´ll probably set a bigger screensize as break for mobile menu without items.

Pablo · June 2018

I don't see your website, I'm not 100% sure if this will work.

@media (max-width:767px){
body #Header #Top_bar {
font-size:12px !important;
}
}

Thanks

andreasconow · June 2018

thanks a lot

Responsive Menu

Comments

This website uses cookies