[Resolved] Navigation Alignment Tweaks

Home Forums Support Navigation Alignment Tweaks

  • This topic has 6 replies, 3 voices, and was last updated 11 months ago by Tom.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1039985
    Kyle

    Hi guys, big fan of the theme. Thanks for all that you’re doing!

    I’m trying to recreate a custom theme for a client on your platform for stability and security. It doesn’t need to be exact, but I’m trying to get it pretty close. I’m getting there, but have a few small questions on the navigation menu:

    First, here is the example site that I’m trying to recreate: http://camphill.edu/

    1) Is there a way to wrap the text on the primary navigation (red text)? Currently if I increase the text size it only gets longer. This is low-priority, but I’d be curious for future menus as well.

    2) The centering logo worked well, but the right-side menu item is awkwardly spaced from the logo. (“continuing education program”) Ideas?

    3) On the “how to apply” button … how can I get that to float to the right? I can get it to either float or look like a button, but can’t get both to work. I’ve tried “float:right;”.

    Many thanks for any insight you can offer!

    #1040064
    David
    Staff
    Customer Support

    Hi there,

    1 and 2 – try:

    removing this CSS:

    .main-navigation .menu-item-separator {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    and adding this:

    .main-navigation li {
        flex: 0 0 20%;
    }
    
    .main-navigation .main-nav ul li a {
        line-height: 1.5em;
        padding: 20px;
        text-align: center;
    }

    3. Float right should be fine – are you trying to add the hover arrow effect?

    #1040459
    Kyle

    Hi David, amazingly quick reply. Thank you!

    1 & 2: nailed it, thank you! Don’t think I would have figured that out myself.

    3: This is what I have so far. I assumed that the arrow effect was way over my head, so I was going to try to add some css animation to the button eventually. But if you know a site or resource to pass along for the arrow effect, that’s amazing. I don’t want to take up your time.
    Anyway, regarding the float, this is what I have now to no effect, did I do something wrong?


    @media
    (min-width:769px) {
    .secondary-navigation .main-nav ul li.nav-button a {
    float: right;
    background-color: #d60034;
    color: #ffffff;
    padding:1em 9em 1em 1.2em;
    line-height: 35px; /*this number will likely need to be adjusted*/
    }
    }

    #1040467
    Kyle

    OK, one other small request. Back to the primary navigation alignment: How would I get the menu items to center vertically (the second menu item, specifically)? I tried adding “align-items: center;”, but to no avail.

    .main-navigation .main-nav ul li a {
    line-height: 1.5em;
    padding: 20px;
    text-align: center;
    align-items: center;
    }

    Thanks again!

    #1040780
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try changing this:

    @media (min-width:769px) {
        .secondary-navigation .main-nav ul li.nav-button a {
            float: right;
            background-color: #d60034;
            color: #ffffff;
            padding:1em 9em 1em 1.2em;
            line-height: 35px; /*this number will likely need to be adjusted*/
        }
    }

    To this:

    .secondary-navigation .main-nav ul li.nav-button a {
        background-color: #d60034;
        color: #ffffff;
    }
    
    .secondary-navigation li.nav-button {
        float: right;
    }

    As for the last question, try this:

    #primary-menu > ul {
        align-items: center;
    }

    Let me know 🙂

    #1040866
    Kyle

    Awesome. Thanks so much, sorry for the hand-holding, guys!

    #1041540
    Tom
    Lead Developer
    Lead Developer

    I’m glad we could help! 🙂

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