Different navigation bar for homepage?

[vvan06]

Hello,

I’m trying to figure out how to have different navigation bar design for homepage vs. the rest of the pages and on mobile.

On the homepage, I like that background on the navigation bar is transparent, as set. https://mareapartners.com

Also, on the homepage, how can I make the navigation box blur/gradient, as you can see, there’s a border there.

how do I make a different design for the rest of the pages where the background is white and the nav headers are blue? (currently, it looks buggy) https://mareapartners.com/about-marea-partners-2/

Also, on mobile, I’d like to keep the navigation bar white as well…

Please help?
Thank you!

[paul.r]

Hi Van,

You can use the class .home to style your header for your homepage only.

For example, if you would like it to have a different background. You can add the code below in Theme Options > CSS

/* home page */
.home .x-navbar {
   box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
   background-color:transparent;
   border:0;
} 
/* other pages */
.x-navbar {
    background-color:#fff;
}

Hope that helps

[vvan06]

Great! Thank you!!! I’ll try that.

Is there a way to make the home Navbar turn from either:

1. transparent to solid after someone initiate the scroll.

Or

2. hide and appear after the scroll is initiated? Example: http://twofeetsouth.com Note how the scroll is hidden until scroll, then it became solid throughout the page.

Thank you!
Van

[paul.r]

Hi Van,

2. To achieve that, you can add this in Theme Options > CSS

.masthead .x-navbar {
     transition: all 400ms ease !important;
     transform: translateY(-300px);
     background-color:#fff;
}
.masthead . x-navbar.x-navbar-fixed-top {
      transform: translateY(0px) !important;
}

Hope that helps

[vvan06]

Hi Paul,

I added in the code, but it didn’t work. Not sure if what went wrong. Here’s all the codes I had in the theme options CSS. Would you please look and tell me why the code didn’t take place?

I’m trying to make the masthead hide and became solid after the scroll is initiated, like the nav bar here: http://twofeetsouth.com

Website: MareaPartners.com

body {background-color:#FEFDFB !important;}
.x-brand {margin:20px 0px;}
.x-navbar .desktop .x-nav {padding:30px 0px;}
.x-btn-navbar.collapsed {color:rgb(0,95,155);}
.x-btn-navbar.collapsed a:hover {color:#c17e12;}
.x-navbar, .x-navbar-fixed-top-active {background-color: rgba(251, 249, 250,);}
.x-navbar .mobile .x-nav li>a {
	background-color: transparent;}
.home.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0px !important;
.masthead .x-navbar {
     transition: all 400ms ease !important;
     transform: translateY(-300px);
     background-color:#FBF9FA;}
.masthead . x-navbar.x-navbar-fixed-top {
      transform: translateY(0px) !important;}
}p{
	margin-bottom:20px;
}

Thank you so much!!!

[friech]

Hi Van,

Thank you for sharing your custom CSS, let’s fix that first since I saw a couple of errors in there. Please update that to this:

body {background-color:#FEFDFB !important;}
.x-brand {margin:20px 0px;}
.x-navbar .desktop .x-nav {padding:30px 0px;}
.x-btn-navbar.collapsed {color:rgb(0,95,155);}
.x-btn-navbar.collapsed a:hover {color:#c17e12;}
.x-navbar, .x-navbar-fixed-top-active {background-color: rgba(251, 249, 250,);}
.x-navbar .mobile .x-nav li>a {
	background-color: transparent;
}
.home .x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0px !important;
}
.masthead .x-navbar {
     transition: all 400ms ease !important;
     transform: translateY(-300px);
     background-color:#FBF9FA;
 }
.masthead .x-navbar.x-navbar-fixed-top {
      transform: translateY(0px) !important;
}
p {
	margin-bottom:20px;
}

And what is this for?

p {
	margin-bottom:20px;
}

I think you don’t need this because p tag has already a default bottom margin.

Let us know how it goes,
Cheers!

[vvan06]

THAT DID IT - THANK YOU SO MUCH. It’s absolutely so beautiful, I could cry.

Last question, after I put in the code, it appears that there’s a gap at the top of the page, I tried to code it out, but it didn’t work… would you please help me with this last bit? You can see at at the top of the site .

www.mareapartners.com.

Screenshot:

Thank you - I deleted the p tag.

Thank you so so much!!!
Van

[thai]

Hi Van,

Please also add this custom CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
    margin: 0;
}

Hope it helps

[vvan06]

That worked!!! Thank you so much!

A little glitch though, in mobile, the Navbar remains hidden, instead of staying fixed at the top and scrolling along with the page. Would you please help? There must be a mobile code that I’m not seeing.

Thank you!
Van

[thai]

Hi Van,

To make the navbar fixed on mobile. Please also add this custom CSS:

@media (max-width: 979px){
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
    }
}

Hope it helps.

[vvan06]

OMG, THAT WORKED!!! THANK YOU SO MUCH!!! You’re incredible!

[paul.r]

You’re most welcome Van!