Archived topic
Mobile navigation
7 replies · Started by sjoerd89 on December 14, 2016
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
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!
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
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 :)
Will do Good night
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 :)
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.
Some sort of simple mega menu is something I'm definitely considering :)
