Transparent navbar on homepage only

Support
#1

Hi, I’d like to make the navbar and menu (built with UberMenu) transparent on only the homepage of http://www.swingeducation.dreamhosters.com/

I’d like it to stay fixed, and fade into the color #36517D upon passing the section I have added the custom ID #heroimage to.

I have tried CSS & JS additions found in past Apex threads, as well as the one here (https://xthemetips.com/transparent-fixed-header/129/), but haven’t had any luck.

Any suggestions?

Thanks!

#2

Hi There,

Thank you for writing in, where did you add the JS and CSS? I am not seeing it on your site. I see that you added the section ID as #heroimage please remove the # sign and leave only the heroimage

Let us know how it goes,
Cheers!

#3

Hi, thanks for the quick response!

Just re-added the CSS and JS from the xthemetips article & removed the #

It’s working!

Also hoping to have the links hover to color #feca43

Thank you!

#4

Hello @Web_Services,

Thanks for updating the thread. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target span:hover {
    color: #feca43;
}

Thanks.

#5

That worked perfectly, thanks!

One last question, is it possible to change the LOGIN link in the nav bar to a button? Same global style as the rest of the buttons on the site.

#6

Hey @Web_Services,

You can style menu items individually so you can add a background only to your LOGIN menu item making it a button. Here’s the instruction.

Thanks.

#7

Ended up dropping button shortcode into an UberMenu Custom Content segment. Thanks for the suggestion though!

#8

You are most welcome. :slight_smile:

#9

How do I exclude mobile devices from this transparent header effect? (so that mobile users always see solid background)

#10

Hi again,

To prevent the transparent effect from mobile screens, you can add the following code as well:

@media screen and (max-width: 959px) {
    body .x-navbar {
        background-color: #36517D !important;
    }
    .ubermenu-skin-minimal.ubermenu-responsive-toggle {
        color: #fff !important;
    }
}

Let us know how this goes!

#11

Thanks! That works!

Also wondering how to add spacing underneath the logo on the mobile version. Right now the logo goes all the way to the bottom of the navbar.

#12

Hi There,

Please also add this custom CSS:

@media (max-width: 979px){
    .x-brand {
        margin: 10px 0;
    }
}

Hope it helps :slight_smile:

#13

Thank you!!

#14

You are most welcome. :slight_smile:

#15

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