Main Menu Overlaps Logo in Qode Bridge Theme

By default, the Qode Bridge theme hides the main navigation and switches to the mobile menu at 1000px.  If you have a large navigation menu and you are finding that your navigation links are overlapping your logo, you can change your CSS so that the mobile menu displays at a wider screen width.

In this example below, my logo is left-aligned and I am triggering the mobile menu at 1200px in screen width instead of 1000px. Change 1200px to the width you need to to stop your menu from overlapping your logo.

If you are not sure where to put this, it’s best to paste it at the bottom of your stylesheet. In the WordPress backend click on Appearance -> Theme Editor. By default it should load the stylesheet (styles.css). Scroll to the bottom of the window and paste this code. Make sure you are on a new line.

                    

@media only screen and (max-width: 1200px) {
.mobile_menu_button {
    display: table;
}
	.main_menu {
    display: none!important;
}
	.header_inner_left, header {
    position: relative!important;
    left: 0!important;
    margin-bottom: 0;
}
.admin-bar header.fixed, .admin-bar header.sticky.sticky_animate {
    padding-top: 0!important;
}
nav.mobile_menu {
display: block;
}
}

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *