[Resolved] Mobile navigation

[sjoerd89]

Hey there Tom,

i have 2 questions about the navigation bar, the first one is that i am using Lingotek to have translation on my website and it works fine. I have 3 flags in my nav bar on normal screen sizes. But when i go to a phone size the 3 flags go in the hamburger menu. What i would love to see is that they would go next to the magnifying glass (search) and stay on top.

https://i.imgur.com/8N71usL.jpg <- Information i get when i inspect

https://imgur.com/bQiHrUs <- Where they go

For the second question it is just a thing i know you have planned for the future but it is to have my sub navigation to be full width. I don’t really like working with a extra plugin for that. This isn’t something i can fix with CSS or is it?

The site is offline so here is a codepen of the site in case you need it: http://codepen.io/Sjoerd89/pen/MbPPwX

Hope you have a great day (or night not sure about your timezone)

Sjoerd

[Tom]

Hi Sjoerd,

1. Does this plugin have any instructions on how to add the flags if they’re not in a menu? We would need to add them in using HTML/PHP inside a hook to have them appear there.

2. Would you want your menu items to be in a row? I’ll have to play with some CSS to see if I can accomplish this.

Bed time for me! Almost 1am 🙂 Hope you have a great day!

[sjoerd89]

The plugin adds a option to the menu section where you can add a language switcher to the menu as a item.
For the navigation i would like the dropdown to be full width, i tried using

.main-navigation ul ul {
	width: 100%;
}

wich made it look better already but the dropdown now has the size of the top navigation item above it. I would love to have the box just full width over the whole navigation.

For now have a good night and i will see the response some other time,

Sjoerd

[Tom]

Can you possibly ask the plugin authors if it’s possible to add the switcher using a shortcode/function instead of using menu items? I believe that will be the only way we can achieve it.

I’ll play with the menu in the morning 🙂

[sjoerd89]

Will do Good night

[Tom]

Alright let’s give this a shot..

.main-navigation .menu-item-has-children {
    position: static;
}

.main-navigation ul ul {
    width: 100%;
}

.main-navigation ul ul li {
    float: left;
    width: auto;
}

.main-navigation ul ul ul {
    left: 0;
    top: auto;
}

.main-navigation ul ul .menu-item-has-children .dropdown-menu-toggle {
    transform: rotate(90deg);
    margin-top: 0;
    padding-bottom: 0;
}

Let me know 🙂

[sjoerd89]

This looks amazing thank you!

For the flags i got some respond from the plugin maker and i will bother him with this ;).
How you had a productive day i am starting mine now.

Btw i think this is something people would like in the theme’s options having the menu like this.

[Tom]

Some sort of simple mega menu is something I’m definitely considering 🙂

[Author]

Posts