[Support request] Oddness when I align primary nav

[Leif]

In this image you can see that when I align my primary nav ‘float right’ of my header it isn’t vertically centered vs the site logo image and it has these horizontal bars that come with it?

http://www.screencast.com/t/RNlRChjttSY

How do I vertically center it and get rid of the bars?

[David]

Hi there,

try this CSS:

@media (min-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .site-logo {
        margin-right: auto;
    }
}

[Leif]

OK neat thanks David. Its centered now but is there also a way to get rid of the lines around the primary navigation?

See image

http://www.screencast.com/t/NRjPB2z0XcI

[Leo]

Remove this CSS from Additional CSS in the customizer:

/* navigation top and bottom rules */
#site-navigation {
	border-top:  solid 1px rgba(136,136,136,0.5);
	border-bottom: solid 1px rgba(136,136,136,0.5);
}

[Leif]

Right on thanks!
But now I realize I need the equivalent rule on top of my hero image 🙁 since the rule isnt coming from the navigation anymore (and I’m moving the navigation)

Sorry this was more complicated than I planned. T_T

[Leo]

Can you link me to the page in question?

[Leif]

Sure its this page (im testing out an updated home page here)

https://fiveyearfireescape.com/sections-trial/

the primary nav is under the header here because I dont know how to change it for just this trial page.
but there are rules above and below it which i will remove when I float the primary nav to the right of the site logo. So I want to put a rule on the top of the hero image once I move the nav.

[Leo]

You should be able to do this:

.page-hero {
    border-top: solid 1px rgba(136,136,136,0.5);
}

[Leif]

Oh nice it works but I realized there is a problem
Not all of my pages have the hero image but when I move my primary navigation I will lose the rule it gives at the bottom of my header.

How would I put the same rule at the bottom of the header? I assume its like this but I cant figure out how to address the header 🙁

.header {
    border-bottom: solid 1px rgba(136,136,136,0.5);
}

[David]

Hi there,

you already have borders on the top and bottom of the primary nav? So i am unsure as to what is missing when you visit a page without a Header Element

[Leif]

Sorry I plan to move the primary nav to float right of the logo, thus causing me to lose my borders, but I don’t want to move it until I can figure out how to put the rules in.

[David]

Aah ok. You would need to use the .site-header selector in your CSS

[Author]

Posts