Change dropdown menu on mobile devices into static 'menubar'

  • Unknown's avatar
    utoursnl · Member ·

    Hi there,

    Currently I’m using the Edin theme and my goal is to create a website in multiple languages. Therefore I use the primary or secondary menu with links to the pages in other languages. That looks really customer friendly on the desktop-version as visitors can click directly on the language of their choice.

    Unfortunately, on tablet and smartphone the menu-bar is changed into a dropdown menu. For visitors it is not clear then where to click if they want to view the page in a different language.

    My question:
    If I upgrade to the premium version of wordpress (edin theme), is it possible to change the (primary and secondary) dropdown menu on mobile devices into a permanent ‘menu-bar’?
    Or is it otherwise possible to change the menu icon on mobile devices into a picture with flags or so?

    Many thanks for answering!

    The blog I need help with is utoursblog.wordpress.com.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I’m afraid that I can’t find a way to do this on Edin. The theme software actually inserts a “display: none;” into the menu wrapper HTML so that the full menu disappears when the touch device menu activates and since it is inserted into the HTML, it is typically very hard to override, if possible at all.

    One suggestion I thought of is to put the links to the different translations at the beginning of the content on your main page and assign a CSS id to it and then we can hide that when the full menu is active and display it and hide the menu icon when the touch menu activates.

    If that is something you would like to try, let me know and I’ll work out the code to put into the home page content and also the CSS required.

  • Unknown's avatar
    thesacredpath · Member ·

    Also, you can try out and preview custom CSS before you buy as explained here, so we can add the stuff and then you can preview it before purchasing one of the plans.

  • Unknown's avatar
    thesacredpath · Member ·

    Sorry for the third posting (need more coffee). We can also probably use CSS to move the menu items you would put into the content up to the top where your secondary menu would be.

  • Unknown's avatar
    utoursnl · Member ·

    Thank you for your reply and helpful comments!

    The most simple I guess would be to replace the menu icon for mobile devices with a picture of certain flags. Is that an option?

    If that’s not the case, I would like to try out your last suggestion about using CSS to move the menu items in the content to the top where the secondary menu is.

    I guess you said it is possible to preview that option. As I don’t know much about CSS I would really appreciate your help with this. I’ve got the CSS try-out modus so I’m ready for it!

    Looking forward to your reply!

  • Unknown's avatar
    thesacredpath · Member ·

    The most simple I guess would be to replace the menu icon for mobile devices with a picture of certain flags. Is that an option?

    Oh! That is a good idea! To do this, we would need an image, about 100px wide by 20px tall, with all three flags on it. We can then replace the 3 line icon in the circle with that and make the circle border into a rectangle.

    If you can create that image and upload it to your media library, I would be happy to work out the code for you.

  • Unknown's avatar
    utoursnl · Member ·

    I created an image and uploaded it in my media library. I’m excited to see what it will look like!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, and thanks for the image. Give this custom CSS a try and see what you think. 

    .menu-toggle::before {
    border-radius: 5px;
    content: url("https://utoursblog.files.wordpress.com/2016/05/flags.jpg");
    height: 50px;
    left: 0;
    width: 120px;
}
.header-navigation {
    max-width: 200px;
    width: 100%;
}
.menu-toggle {
    float: right;
    padding-left: 150px;
}
  • Unknown's avatar
    utoursnl · Member ·

    It’s fantastic! It looks great and it works.

    Just three minor questions left :)

    * Is it possible to delete the text ‘menu’ next to the menu-image?

    * And what if I would like to change the image ? Just upload another one and change the url?

    * Does the size of the picture always has to be 100px x 20px? Or can it be larger/smaller?

  • Unknown's avatar
    thesacredpath · Member ·

    Deleting the text would be problematic, but what we can do is to let the flag section cover it. In the .menu-toggle rule, remove the left padding so it looks like this. 

    .menu-toggle {
    float: right;
}

    If you wish to change the image, you can do that, and you can use a larger or smaller one as well. Adjustments would need to be made to the width and height in the .menu-toggle:before rule most likely. When I mentioned the size for the image, it was just to keep the size of the flag area consistent with what was there and also to keep it in proportion to the word “Menu”. Given we have effectively hidden “Menu” with the above change, that is no longer a concern.

  • Unknown's avatar
    utoursnl · Member ·

    Again, it looks really great with your help! All problems solved.

    Thank you very much! And if you happen to be in Europe and visit the Netherlands, please come to Utrecht and I will be happy to show you around (as that’s what my site is about :).

    Cheers!
    Raphaël

  • Unknown's avatar
    utoursnl · Member ·

    For free ofcourse! :)

  • Unknown's avatar
    thesacredpath · Member ·

    Raphaël, thanks, and you are welcome. If I get to the Netherlands, I’ll look you up.

  • The topic ‘Change dropdown menu on mobile devices into static 'menubar'’ is closed to new replies.