I'm adding a Main menu to fixer theme but I'm having

Hello I'm adding a Main menu to fixer theme but I'm having responsive issue problems. Can you tell me how to solve this? here is my css
.menu-main-menu-container{
width:1150px;
}

div[data-style='horizontal'] ul.menu > li.menu-item > a,
div[data-style='vertical'] ul.menu > li.menu-item > a{
color:#fff;
Raleway
font-weight: 400;
font-style: normal;

}

div[data-style='horizontal'] ul.menu > li.menu-item:hover > a,
div[data-style='vertical'] ul.menu > li.menu-item:hover > a {
color:#1de3fe;
}
div[data-style='horizontal'] ul.sub-menu > li.menu-item > a,
div[data-style='vertical'] ul.sub-menu > li.menu-item > a {
background-color:#000;
opacity: 0.9;
color:#fff;
border-bottom: 1px solid #fff;
}

  • Michael Bissett

    Hey @Neil, hope you're doing well today! :slight_smile:

    I do see what you mean here, on smaller screen resolutions, the right side of the menu goes off the side of the screen (at 320px, I can only see 3 menu items).

    Are you wanting to force a width of 1150px for desktop screens only? If so, then I'd advise having the CSS code laid out like this:

    @media only screen and (min-width: 1150px) {
    
    .menu-main-menu-container{
    	width:1150px;
    }
    
    }
    
    div[data-style='horizontal'] ul.menu > li.menu-item > a,
    div[data-style='vertical'] ul.menu > li.menu-item > a{
    	color:#fff;
    	font-weight: 400;
    	font-family: 'Raleway', sans-serif;
    	font-style: normal;
    }
    
    div[data-style='horizontal'] ul.menu > li.menu-item:hover > a,
    div[data-style='vertical'] ul.menu > li.menu-item:hover > a {
    	color:#1de3fe;
    }
    div[data-style='horizontal'] ul.sub-menu > li.menu-item > a,
    div[data-style='vertical'] ul.sub-menu > li.menu-item > a {
    	background-color:#000;
    	opacity: 0.9;
    	color:#fff;
    	border-bottom: 1px solid #fff;
    }

    If that's not your desired look, then could I ask you to elaborate on how you're wanting this to look please? :slight_smile:

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.