Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Change alignment of individual menu items

Home Forums Support Change alignment of individual menu items

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39771
    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

    #39792
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #39810
    Nick

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

    Thanks so much!

    Would be a nice extra function in GP. 😉

    #39815
    Tom
    Lead Developer
    Lead Developer

    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!

    #39818
    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. 😉

    #40026
    Tom
    Lead Developer
    Lead Developer

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.