Align Header logo & Menu Vertically Centre

Support
#1

Hi,
I have asked this question before but I was using a different theme then and it seemed to work,
however, unfortunately, I can’t seem to get it working on this stack, although I assumed all the classes are still the same?

please, can you advise?

Also, I’m using the Integrity Stack, however, I think the ethos sidebar style looks a lot better,
I was on other posts that the only way to use a different stack is by using custom CSS,
I’m assuming if I just got all the CSS for the sidebar and placed into the custom CSS, that would work?

anyone able to provide me with the CSS for the sidebar for ethos?

Cheers
Sean

PS. This is the code I have tried but doesn’t seem to be working.

.x-brand img {
vertical-align: top;
}
@media (max-width: 979px){
.x-brand {
margin-top: 12px
}
}
@media (max-width: 380px){
.x-brand {
margin-top: 28px;
}
.x-brand img {
width: 150px !important;
}
}

#2

Hello There,

Thanks for writing in!

You do not need any custom css code to be able to resolve your issue. Simply go to X > Theme Options > Header and set your Navbar Top Height to 80 pixels and make sure that the top margin of the logo image in X > Theme Options > Header > Logo - Alignment is only 12 pixels.


Please check your site now.

#3

Thanks for your reply, yes that does appear to be working well.

regarding my other question, do you know if this is possible to use the ethos sidebar style with integrity stack?

#5

Hi There @seanlincoln

There’s no inbuilt feature or option to use different stacks together. It could be possible with custom development, regretfully it would be outside the scope of the support we can offer.

If you’re just looking to replicate the appearance, you can add custom CSS rules into your X > Theme Options > CSS area.

Thanks!

#6

Thanks for your reply,
I have used the CSS for the ethos sidebar widget and inserted it into the custom css, which is working well.
what i now want to do is increase the margin between each widget, but keep the top widget without any margin.

please see code below for what i’m doing.

any help would be great!

.x-main .h-widget, .x-sidebar .h-widget {
margin-top: 20px;
border: 1px solid #333;
padding: 0.65em 0.65em 0.75em;
font-size: 85%;
letter-spacing: 0.15em;
text-align: center;
text-transform: uppercase;
color: #3F9ED6;
background-color: transparent;
}
.h-widget {
margin-top: 20px !important;
}
.h-widget:first-child {
margin-top: 0px !important;
}

#7

Hi There @seanlincoln

The following CSS rules should work for you.

.x-sidebar .widget:first-child {
    margin-top: 0;
}
.x-sidebar .widget {
    margin-top: 20px;
}

Hope that helps.

#8

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