Responsive Menu

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

Comments

  • edited June 2018
    picture of the laptop screen: menu items shifted downwards:
  • 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
  • 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
  • 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


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


    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
  • 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.
  • 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.
  • 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
  • thanks a lot
Sign In or Register to comment.