[Resolved] Tagline Below logo. Tagline and logo to the left of menu

[Tony]

Hello.
I’m trying to do what the title describes. Position the tagline below the logo and then position both to the left of my main menu. The following code in style.css successfully places the tagline below the logo but they both end up above the menu.

.inside-header {
display: flex;
flex-direction: column;
}
.site-logo {
order: -1;
margin-bottom: 10px;
}

I have also tried the following but didn’t work for me:

.nav-float-right .inside-header .main-navigation {
float: none;
display: inline-block;
vertical-align: middle;
}

Kind regards,

Chris.

[David]

Hi there,

any chance you can provide us with login details for the site so we can take a look?
You can send them via the Account Issue Form:

https://generatepress.com/contact/

Please add the URL of this topic to the form

[David]

Try this CSS:

.inside-header {
    display: grid;
    grid-template-columns: 240px auto;
}
.site-logo {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.5em;
}
.site-branding {
    grid-column: 1;
    grid-row: 2;
}
#site-navigation {
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end; 
    -ms-flex-item-align: middle; 
    align-self: middle;
}

[Tony]

Thanks David!

It worked with a couple of minor changes. For some reason I get an ‘Unknown Property’ error for the following:
justify-self: end;
-ms-flex-item-align: middle;

Also, grid-row: 1 / 2; leaves a big space between the logo and the tagline, so I changed it to 1 / 3

The final script:

.inside-header {
display: grid;
grid-template-columns: 240px auto;
}
.site-logo {
grid-column: 1;
grid-row: 1;
margin-bottom: 0.3em;
}
.site-branding {
grid-column: 1;
grid-row: 2;
}
#site-navigation {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}

.main-navigation .main-nav ul li a {
padding-left: 5px;
padding-right: 20px;
line-height: 60px;
}
.main-navigation li {
float: right;
position: relative;
}

[David]

Awesome – you can ignore the Unknown Prorperty errors the lint checkers don’t support all the prefixes, or all of the CSS Grid properties. Yes my bad on the grid row – all rows ( and columns ) start at 1 – so to span 2 columns it must end in 3 🙂

[Author]

Posts