2 simple design how to questions custom CSS

  1. I’d like my logo to be centered with the menu navigation items on either side…I feel like I’ve done this before, but can’t recall how. How do I get the logo in the middle of the header with navigation on either side of the logo?

  2. I can’t find the custom CSS I saved that made the top menu bar transparent so a slider revolution slide below it would show behind it. In other words I want the header to be transparent over the full width slider rev slide. Then go opaque and sticky when user scrolls down. Can you show me what the CSS would be to create that look?

Thanks!

Chris

Hello @444media,

Thanks for asking. :slight_smile:

  1. Please refer following thread: https://theme.co/apex/forum/t/center-menu-on-ethos-2/8567/2?u=prasant

  2. Would you mind share website URL?

Thanks.

Great…thanks. I’ll give that thread a read.

The url is http://myserenitymusic.com/ But there’s really nothing much there now. Just started it yesterday. But I’d like to be able to do something basically like this site’s header does: https://makanacharters.com/

OK…in regards to the first question above, I did as the thread you referred me to said to do and it works but with 2 issues:

  1. In customization section under Header, I removed the logo image (obviously don’t want it appearing twice up there). But when I do that the site name comes up in text form. So it seems that my only choice is to either have text there or a logo image. How do I get rid of that?

  2. The navigation menu items are lining up with the top of the logo image. How do I adjust the logo so it’s centered on the menu bar?

If you go to http://myserenitymusic.com/ you’ll see what I mean.

Hi there,

You should not remove the logo, you can just hide it with this CSS :slight_smile:

.x-brand {
display: none;
} 

And to vertically align it,

@media (min-width: 980px) {
.x-nav-wrap.desktop #menu-item-41 a {
padding-top: 5px;
}
.x-navbar-inner {
    min-height: 138px;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
   height: 138px;
}
}

Please add these CSS to your global custom CSS.

Cheers!

Thank you for the info! The alignment CSS worked, but the CSS to hide the logo did not. I added them both in the custom CSS section, and added the logo back, but now it’s showing twice…so the logo (in the header) is not being hidden. But the logo in the nav menu did align properly, so that worked.

What about the other part of my original question? I’d like to make the slider rev slide go all the way to the top of the screen and have the nav menu be transparent. Then when scrolling down the nav menu goes opaque and sticky.

Also, right now there is a white line below the nav menu…how can I get rid of that?

Thanks so much for all of your help!

Hi There,

Please add this on your custom CSS.

/*hide the logobar on desktop*/
@media (min-width: 980px) {
	.x-logobar {display: none;}
}

/*hide the logo from the mobile menu*/
@media (max-width: 979px) {
	.x-nav .menu-item-41 {display: none;}
}

/*Slider behind the header*/
.home .masthead.masthead-stacked {
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

/*remove the line and shadow below the header*/
.x-navbar {
	border-bottom: 0;
	box-shadow: none;
}

/*opaque navbar background on scroll*/
.x-nav-trans {
background-color: rgba(255,255,255,0.5) !important;
}

I’ve added a note there on what each block does. The last block won’t work though unless you added this on your Theme Options > JS

jQuery(function($){

$(window).scroll(function(){
if( $(this).scrollTop() != 0 ) {
   $('.x-navbar-fixed-top').addClass("x-nav-trans");
}else{
   $('.x-navbar-fixed-top').removeClass("x-nav-trans");
}
})
});

Please clear your browser’s cache before you preview the page.

Keep in mind that further customization from here will fall under custom development and fall outside of the support that we can offer.

Thank you,

Worked perfectly! Thanks so much for your help!

We’re delighted to assist you with this.

Cheers!

Just noticed that a Slider Revolution slide is not appearing behind the menu/header on an inner page. I thought the code would apply to the site globally, but seems to only apply to home page(?). How do I get it to apply to the entire site? Works fine on home page…don’t want to change anything there, but on inner page the background color of the site is appearing behind the menu bar and a slider rev slide is below it, not behind it. Thanks

Hi there,

From the above CSS, just remove this .home and it should be applied to all pages.

Cheers!

I would like to do the same, but after adding the CSS and the JS, the slider doesn’t appear under the menu. Not sure what I’m doing wrong.

Hi There,

Please add the following CSS to Theme Options CSS

.home .x-slider-container.below {
       margin-top: -92px;
}

Hope it helps!