Is it possible to restructure the topbar/navbar so it is set within the page and stays fixed?

Support
#1

Hi, I’ve started a site and I’d like to have a full background slider with the topbar/navbar set within the page so you can see the slider image either side of it and a little bit above it too! Is this possible to do? I’ll upload a mockup I’ve out together for your reference at the end of this post.

Also, is it possible for the following:

  1. The background of the topbar/navbar to be transparent
  2. The topbar/navbar to stay fixed in the same position when the user scrolls down the page

I’ll put the URL in a secure note along with the By Pass Password as I’ve got a maintenance page up at the minute.

Thanks!

#2

Hello @core365,

Thanks for writing in!

For the slider, I suggest you to take a look at Revolution Slider that comes bundled with X Theme. Revolution Slider can be installed from X > Validation > Extensions.

To position the Navigation and topbar in between Slider, please add following CSS under X > Theme Options > CSS:

.x-topbar {
    width: 80%;
    margin: 0 auto;
}

header.masthead.masthead-inline {
    width: 80%;
    margin: 0 auto;
}

.x-topbar-inner.x-container {
    width: 100%;
}

Add following CSS under X > Theme Options > CSS:

header.masthead.masthead-inline {
    background-color: transparent;
}

Looks like you have already made the necessary changes. Can you please confirm?

To get started with Revolution Slider, please take a look at following resource:

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Hi, thanks, it’s kind of worked! There are a couple of issues with it, I hope you can help out with them!:

  1. There’s a solid white band at the top that goes across the whole width and I can’t get rid of it!
  2. When you scroll down the page, the navbar jumps and goes back to fill the width of the screen
  3. I can’t tell if there’s a gap from the top of the topbar/navbar as I’d like it to start about 30px from the top of the page

Thanks!

#4

Hi @core365,

First, please navigate to Theme Options > Header and set the Navbar Top Height to 0

Then add this to Theme Options > CSS

header .x-topbar {
    margin-top: 45px;
}
.x-navbar {
    background-color: transparent !important;
    padding-left: 2em;
    padding-right: 2em;
}
.x-navbar .x-navbar-inner .x-container {
	background-color: rgba(255, 255, 255, 0.5);
	margin-top: 30px;
}

I see that you made the topbar position: fixed; to make it a sticky bar. I suggest you wrap that custom CSS with a @media (min-width: 767px) CSS media query so it does not affect the mobile view.

Thanks,

#5

Hi, thanks for that, but I’m not too sure what’s happening with it! I was tweaking the CSS and I got it to look exactly how I wanted it, then I saved it and refreshed the page and it changed! I then scrolled down the page and the header/navbar jumped and looks different!

Thanks!

#6

Hi @core365,

To fix it, you can add the code below in Theme Options > CSS

.home .x-navbar.x-navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

Hope that helps

#7

Hi, thanks, but unfortunately it didn’t help. I still have the same problem with it moving to the top of the page after scrolling down the screen.

Thanks!

#8

Hey @core365,

Change it to

.home .x-navbar {
    position: fixed;
    top:0;
    left:0;
    right:0;
}

Then adjust the margin of header .x-topbar again.

Hope that helps.

#9

Yay! You’ve sorted it! Thank you so much!

I really appreciate everyone’s help and time with this. Thank you!

#10

We are delighted to assist you with this.

Cheers!

#11

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