Change navigation menu design on mobile devices

  • Resolved Weltgebraus

    (@weltgebraus)


    10 years, 6 months ago

    I have a question regarding the design of the navigation menu on mobile devices, and would be thankful for any kind of advise. I am using a customized version of the “Minimaliste” theme on the website weltgebraus.com The current menu bar is jumping to the mobile version whenever a screen is smaller than 600px. Problem is that the mobile menu is kind of bad looking, very Windows’ish. I would like to replace it with something more… minimaliste. For example the one they use one this website jump on to when the screen size is decreased: https://hellomrmag.com/

    In the current Stylesheet editor I find the following:

    .selectnav { display: none; }

    @media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {

    html {
    -webkit-text-size-adjust: none;
    }

    #logo {
    width: 100%;
    }

    #mainmenu {
    width: 100%;
    float: left;
    clear: left;
    margin-top: 15px;
    margin-bottom: 10px;
    }

    .mnav {
    float: left;
    width: 100%;
    margin-top: 0;
    }

    ol.commentlist ul li,
    ol.commentlist li {
    width: 90%;
    margin-left:0;
    padding-left: 0;
    }
    }

    https://www.ads-software.com/plugins/menu/

Viewing 2 replies - 1 through 2 (of 2 total)

  • You’re just going to have to use good old fashioned CSS to style that select menu the way you want. Inside your media query (the bit of code you pasted above) you’ll need to specifically target the select field and then add any design changes you want. For example, you could add

    #mainmenu select {
     border: 0 solid transparent;
     text-transform: uppercase;
     color: #999;
     font-family: Arial, sans-serif;
}

    That should remove the box border of the menu and change all the text to an uppercase gray Arial font. Of course you’re going to have to figure out exactly what styling you need, but that should be the place to do it.

    Thread Starter Weltgebraus

    (@weltgebraus)

    Nice! Thanks Andy Joe, looks already far far better!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change navigation menu design on mobile devices’ is closed to new replies.