Logo alignment

Support
#1

Am using Renew stack, with left side navigation and logo. Have tried everything to get my logo to centre over the navigation;
.x-navbar-fixed-left .x-brand, .x-navbar-fixed-right .x-brand {
margin-left: 30px;
margin-bottom: 10px;
}
entered into global css but is ignored.

While there is an option to fix top and bottom spacing via theme options, there is nothing that allows me to set left (or right) margins.

see www.tidewaterpress.ca

#2

Hi @kjdenny,

Thanks for writing in.

Add this in your custom CSS:

.x-brand img {
    margin: auto;
    display: block;
}

Hope it helps.

Let us know how it goes.

Thanks.

#3

Nope. Still not being picked up.

Added that to custom css via Theme options, but this is what shows when element inspected in Firebug:

.x-brand img {
width: 180px;
}

#4

Hi again,

Replace the previous code with this:

.x-brand img {
    margin: auto !important;
    display: block !important;
}

Let us know how this goes!

#5

Nope. Still not working. The “inline style sheet #1” is still taking precedence and this code is not being picked up. Still showing as above in Firebug.

You’d think aligning the logo in the sidebar would be straightforward (everyting with X used to be straightforward, even customisation, but not any more…) I’m trying to set up the simplest of sites with no joy. See www,vivalogue.com, which uses X and which places the logo perfectly.

With every new version, your theme gets more and more difficult to use.

#6

Hey there,

There must be a syntax error in your Customizer that is preventing the changes to take place, try adding the above code in your Child Theme’s style.css file. If it works then check your CSS in your Customizer and look out for any missing curly bracket or any other syntax error and resolve it.

Let us know how this goes!

#7

I don’t think there is a syntax error. This is what is in the style.css of my Child Theme:
/*

.x-brand img {
margin: auto !important;
display: block !important;
}

And this is the exact code that is in the global css in Theme Options

.x-brand img {
margin: auto !important;
display: block !important;
}

Both saved and updated. Caches cleared.

And still the code is not being picked up.

#8

And this is what Firebug shows for the element:

.x-brand img {
width: 180px;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
*, ::before, ::after {
box-sizing: border-box;
}
.x-navbar-fixed-left .x-brand, .x-navbar-fixed-right .x-brand {
text-align: left;
}
.x-navbar-fixed-left .x-brand, .x-navbar-fixed-right .x-brand {
text-align: center;
}
.x-brand {
font-family: ;
font-size: 36px;
font-style: normal;
font-weight: 400;
letter-spacing: -2em;
color: #272727;
}
.x-brand {
line-height: 1;
}

#9

Hi @kjdenny,

In this case, please share us your FTP and Admin credentials so we could check your setup closer.

Don’t forget to set it in secure note.

Thanks.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.