Help with Transparent Navbar

Support
#1

Hi,

I tried to follow the instructions in this link. It didn’t exactly work. Can you give some insight into what might have gone wrong?

#2

Hello Ben,

Would you mind providing the link to the site in questions so that we can check it as I am not sure which site you are referring to since you have several licenses in your account. For the meantime, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

#3

http://staging.faithful-tendency.flywheelsites.com/

Here is the link.

If there is a username or password

Summary
#4

Hi again,

Thank you for providing the URL. Please add the following code as well:

.home .x-navbar {
    background-color: transparent !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

That seemed to work, but now there is a spacing issue. I commented out the positioning and it seemed to help, but it overrode the transparency. Here is the code as it stands now.

   /* Navbar */
.home .x-navbar {
background-color: transparent;
border: none;
box-shadow: none;
}

.home .masthead.masthead-inline {
/*position: absolute;*/
width: 100%;
}

.home .x-navbar.x-navbar-fixed-top {
background-color: rgba(84, 84, 84, 0.5);
 }
.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color: #fff;
}

.home .x-navbar {
background-color: transparent !important;
}`
#6

Hi Ben,

Please uncomment the positioning in the code then increase the top padding to the first section of the homepage.

Hope this helps.

#7

It did.

However, I do not see any place to edit the padding within the cornerstone editor. Am I doing something wrong? Margin is all that is displaying.

#8

Also, it seems to not be displaying globally. The edits have just been on the home page.

#9

Hi,

  1. For the padding settings to show up, you need to enable advanced settings.

  1. If you would like it to be global, remove .home in your css code.

eg.

   /* Navbar */
 .x-navbar {
background-color: transparent;
border: none;
box-shadow: none;
}

.masthead.masthead-inline {
/*position: absolute;*/
width: 100%;
}

.x-navbar.x-navbar-fixed-top {
background-color: rgba(84, 84, 84, 0.5);
 }
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color: #fff;
}

 .x-navbar {
background-color: transparent !important;
}

Hope this helps

#10

This worked awesomely.

Now, how do I get the navbar to stay static on the top as the page scrolls?

#11

Hi again,

To make the Navbar sticky, navigate to Theme Options > Header > Navbar > Navbar Position and select Fixed Top (see screenshot)

Hope this helps!

#12

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