[Resolved] Change alignment of individual menu items

[Nick]

Hey Tom,

how could i change the alignment of individual menu items in horizontal (e.g. “Start” + “About us” at left side in a menu and “Impressum”+”Location” at the right side in a menu)? The thing i mean is nearly the same described at this site:
http://sevenspark.com/docs/ubermenu-align-items-right

Thanks in advance so much!

Greetings, Nick

[Tom]

Hi Nick,

1. In “Appearance > Mennus”, open the “Screen Options” tab (top right), and enable “CSS Classes”.

2. Open your menu item, and you’ll see the CSS Class field.

3. Add these classes to each item you want to float right: menu-item-float-right

4. Add this CSS:

.main-navigation li.menu-item-float-right {
      float: right;
}

That should do it!

Let me know 🙂

[Nick]

Perfect, Tom, exactly what i’m looking for. 🙂

Thanks so much!

Would be a nice extra function in GP. 😉

[Tom]

Glad it worked 🙂

Yea, maybe just a class that can be used in the CSS Class field by default? Like “menu-right” or something. Worth thinking about.

Thanks!

[Nick]

Yes, would be nice to integrate it, but at the other hand side it’ll be a very hidden and not a logical option. Better would be e.g. a extra option for such thing / dropdown field at the “Menu”-Settings Page. Plugin “Menu Icons” uses a similar option of choosing icons in the “Menu”-Settings Page.

By the way i need this setup (right side menu items) to show Social Icons in the menu bar (nice/slight plugin: https://wordpress.org/plugins/menu-icons/ ). But i think that’ll be much more coding to get the alignment option at the “Menu”-Settings Page? 😉

Other eventuality: You could make a knowledge-base with a view at all the customizing options / css codes in generatepress, just for all the rookies like me. 😉

[Tom]

Thanks for all the suggestions! They’re appreciated 🙂

For social icons in your menu, I just like to use the FontAwesome icon code as the Navigation label, and float them right as shown above.

As for the knowledgebase – I’m working on it 🙂 Slowly making my way through the options.

Thanks!

[Author]

Posts