Home Forums Basel – Premium Template How to prevent the main nav menu items from being pushed to lower level

This topic contains 4 replies, has 3 voices, and was last updated by Elise Noromit Elise Noromit 1 week, 2 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #257183

    mizzionare
    Customer

    I notice how on different laptop sizes my site’s main menu is too small and pushes the last items to the bottom making the menu way too big. I was wondering if there was CSS to prevent this from happening by either auto decreasing the font size of smaller laptops or just making those end items disappear.

    Screenshot included below – thanks!!

    Private Content Hidden
    #257201

    mizzionare
    Customer

    Also I found the same thing for the right side of the menu on smaller mobiles, Is there anyway to force these to stay in the same line by maybe moving them to the left instead of putting them on the lower level? (screenshot attached)

    Private Content Hidden
    Attachments:
    You must be logged in to view attached files.
    #257306

    Hi,

    Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

    @media (max-width: 1120px) {
    	body .main-nav .menu>li>a {
    		font-size: 11px;
    	}
    }
    
    @media (max-width: 320px) {
    	body .main-header .site-logo {
    		width: 25% ;
    	}
    }

    Regards

    #257927

    mizzionare
    Customer

    That works perfectly for the left side of the menu with words, but can it also be done for icons on the right side (sandwich/cat/etc.) since on smaller phones it still pushes the sandwich logo down

    Thanks!

    #258069

    Hello,

    Please replace this snippet:

    @media (max-width: 320px) {
    	body .main-header .site-logo {
    		width: 25% ;
    	}
    }

    With this one:

    @media (max-width: 320px) {
    	body .main-header .site-logo {
    		width: 20% ;
    	}
    }

    Best Regards

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.