Docs

[Jacob L]

Hey there,

I was wondering how exactly to make the slider overlap with the navbar, like this website:

http://theme.co/blog/seven-key-elements-of-a-successful-wordpress-website-part-1/

I’m guessing it has to do with manually moving the slider with css in customizer, but I could use some guidance. Much appreciated!

[Nabeel A]

Hey Jacob,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Jacob L]

Sorry about that.

The current test area i’m working on is

http://www.lowenthal-hawaii.dreamhosters.com

Also FYI I was inspired by the link I originally posted, the current setup for the above link isn’t an attempt, it’s a separate setup altogether….but I was interested in emulating the link I originally posted because it looks great.

[Paul R]

Hi Jacob,

You can add this under Custom > CSS in the Customizer.

/* To make it overlap with slider */
.masthead.masthead-inline {
   position: fixed;
   z-index: 9999;
   width: 100%;
   top: 0;
   background: transparent;
}

/* To make background transparent */
.x-navbar {
   background:transparent;
   box-shadow:none;
}

/* To change color of navigation links */
.x-nav > li > a {
   color:#fff;
}

/* To change color of navigation links when hover */
.x-nav > li > a:hover {
   color:#fff;
}

The codes are labeled for what it does.
Feel free to change the code.

Hope it helps.

[Jacob L]

Perfect. Thanks so much! You’re on top of it. 🙂

[Christian]

You’re welcome Jacob.

[Joe]

Hi, this seems to work great for me accept I have a problem with the nav bar overlapping the top bar when scrolling. How can I keep the the navigation and hide the nav bar when scrolling normally. Or how can I keep the top bar present without the nav overlapping it http://www.studio5media.com
Thanks

[Jade]

Hello there,

To make the nav bar and top bar scroll normally, you may go to Appearance > Customize > Header > Navbar Position > Select: Static Top.

Hope that helps.

[Author]

Posts