Add padding to header and center logo in "Ride" theme

Technical Q&A
1

Hello! Just wondering how to edit the code in order to add more spacing between the objects in my header as well as center my logo in the middle of the header. Thanks!!

2

Hi @ryanwright1999 , go to edit code > assets > base.css and find this element:

.header--middle-left {
    grid-template-areas: "heading navigation icons";
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
}

Replace it with:

.header--middle-left {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: auto 3fr 1fr;
    column-gap: 2rem;
}

Then, find this element:

.header__heading, .header__heading-link {
    justify-self: start;
}

Replace it with:

.header__heading, .header__heading-link {
    justify-self: center;
}

That will solve centering your logo, and now for the spacing, add this to your base.css file:

@media only screen and (min-width: 992px) {
.header__menu-item{
padding: 1.2rem 2rem 1.2rem 1.2rem!important;
}
}
3

Is there a way to have the logo directly in the middle? This was helpful, however the end result was this:

ryanwright1999_0-1661793660519.png
ryanwright1999_0-1661793660519.png2548×402 79 KB

is it possible to have the “Quad Squad” logo in the direct middle and have the other Banner wrap around it? Thanks for all the help!!

4

hello I am using the “Ride” theme too and am trying to create different spacing between the words/menus. I have added this code and changed the “1.2” number to 2, 3, 4 and while it did create spacing it also created vertical space from the top margin of the header and my dropdown arrow moved too.
is there any other way to do this ?
thank you . :slightly_smiling_face: