Change the navigation menu on mobile size

Hello i’d like to change the design of the mobile version of the nav bar on mobile units. Right now it’s gigantic, i would like to have a more slim design with the logo to the left and the burger icon to the right and the same height as each other. Right now the burger is below the icon and takes up enormous space.

How can i fix this?

Thanks in advance / Testarn

Hello Testarn,

Can you please provide a link to your website?

What do you mean by “the same height as each other”?

Kind Regards, Roman.

Hey @Roman i dont have a link to my website it’s still only local. But i made a picture what i mean…

The picture on the top is how it looks today, the bottom one is how i want it to look. Also this is pretty much how every other theme looks like with the nav menu.

Thanks again in advance

Hello Testarn,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (max-width: 767px) {
    header#masthead div.col-md-4.col-sm-8.col-xs-12,
    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        width: auto;
    }

    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        float: right;
        padding: 10px 30px;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

@Roman Thanks that works! however now the drop down menu is wrong :confused: it’s outside of the screen. See image below

Okay Testarn,

Please try to use this CSS code instead:

@media only screen and (max-width: 767px) {
    header#masthead div.col-md-4.col-sm-8.col-xs-12,
    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        width: auto;
    }

    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        float: right;
        padding: 10px 30px;
    }

    header#masthead nav#mainnav-mobi {
        left: -194px;
        width: 250px;
    }
}

Please let me know if you need more help.

Kind Regards, Roman.

Yeah works. Thanks alot for your help

You are welcome Testarn,

Kind Regards, Roman.

The above mentioned metode for changing the menu button and header on mobile devices worked fine for me, too.

But when you as user click the buttom ‘Click to Begin’ - the screen move to - in my website ‘Services’ - below on the site.

But ----- the size/height saved in the header at the top - is missing in transport to next Screen-view. You can see the bottum of the slider on the next screen-view. How do I solve that?

Hello @hjald,

Can you please create a new topic for your issue with a link to your website? Also please include a link to this topic if you are using the code above. It will make it easier to help you.

Kind Regards, Roman.

Hi Roman. I made a new topic. I think Khalif is looking into at the moment. Thanks

Okay, it’s great.

I didn’t notice it, sorry.

Have a nice day! :slight_smile:

Kind Regards, Roman.