Archived topic
Center specific menu items in primary navigation
7 replies · Started by Mårten on December 20, 2022
Hello,
I use this code to center the menu options in desktop.
@media(min-width: 900px) {
.nav-align-center .inside-navigation {
max-width: 1200px;
margin: auto;
}
.main-nav {
flex: 1;
}
.main-navigation li:first-child {}
.main-navigation li:first-child {
margin-left: auto;
}
.main-navigation li:last-child {
margin-right: auto;
}
}
.main-navigation, .main-navigation ul ul {
padding-top: 5px;
padding-bottom: 5px;
}
But I only want certain menu items to be centered. Is it possible? If yes, how do I make it happen? :)
Is it also possible to place the search icon wherever I want in the menu? Now it goes under the hamburger icon. See picture.
Thanks in advance!
Hi there,
can i see the actual site ?
Hi,
Yes of course.
Hi Marten,
Which Menu items are you looking to center?
Moreover, where do you want the Search icon placed?
We'll let you know if it's possible, and if so, how to do it.
I see.
The first steps we need to do are:
1. Create a Block Element - Hook.
2. Hook it to menu_bar_items.
3. Set the Display location to Entire Site
4. Add a GB Headline Block and set it as a link to "Mina Sidor".
5. Lastly, remove "Mina Sidor" from your Primary Menu through Appearance > Menus.
These steps should give us a better structure to achieve the look you're going for.
"My Pages" seems to work. Thanks!
Now only the search icon remains. We want the icon to be to the left of "My Pages". It is possible?
Hi there,
edit the hook that you set to the menu_bar_items and you will see in the settings the Priority field. Change its value to 20 it should position it after the search icon.
