Archived topic

Navigation Alignment Tweaks

6 replies · Started by Kyle on October 20, 2019

Viewing posts 1–7 of 7

October 20, 2019 at 10:32 pm #1039985

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!

October 21, 2019 at 1:42 am #1040064

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?

October 21, 2019 at 8:52 am #1040459

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*/
}
}

October 21, 2019 at 9:02 am #1040467

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!

October 21, 2019 at 4:44 pm #1040780

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 :)

October 21, 2019 at 7:43 pm #1040866

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

October 22, 2019 at 9:06 am #1041540

I'm glad we could help! :)

This archived topic is closed to new replies.

Start building better websites today.