[Dave SParticipant]

Hello,

I’m very early in developing my site (http://www.nimblesound.com) I’m running the Renew stack.

I’m wondering if there is way to mimic the nav bar on this site with X Theme:
https://socialtriggers.com

The Nav bar starts as transparent but when you scroll a background color slides in.

Thanks you for the great support.

[RupokMember]

Hi there,

Thanks for writing in! It could be possible with some CSS and JS.

#1. You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 300) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

#2. Then add this under Custom > CSS in the Customizer.

.x-navbar {
    background-color: transparent !important;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.x-navbar.alt-color {
    background-color: #141615 !important;
}

Make sure to use an image background to the first section to get expected result.

Cheers!

[Dave SParticipant]

Wow! That’s incredible thank you so much. Truly amazing support you guys provide.

I have one problem.

The page doesn’t load with the image at the top of the screen, there is a white band before the image begins. Anyway to remove this?

[Dave SParticipant]

Digging on my own, I figured out that I needed to make the margin on the header 0px. This worked great. Wow, thanks again!

.masthead {
height:0px;
}

[Dave SParticipant]

Another question I have:

I would like to change the background color for the NavBar upon click.

E.g. when you click a navbar heading with a submenu the heading turns black.

Ideas?

[Dave SParticipant]

I also need the mobile nav to have a black background when you click on the hamburger button.

Attached screenshots of both issues.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:979px){
.x-nav-wrap.mobile.collapse,.x-navbar .sub-menu {
    background-color: #000;
    padding: 20px;
}
}

Hope that helps.

[Dave SParticipant]

Thank you, Christopher!

Very close to perfect.

Is there any way to change the hamburger menu and the submenu heading color on click?

Please see attached screenshots… the first two are my site. The last screenshot is what I want it to look like.

Very much appreciative for the assistance! Will highly recommend X Theme 🙂

[RadModerator]

Hi there,

Looks like it’s now protected by coming soon page, would you mind providing login credentials as well?

Thanks!

[Dave SParticipant]

Hi Rad,

Sorry!

Here is the original page:

http://www.nimblesound.com/home

[ChristopherModerator]

Hi there,

Please add this code :

li.current-menu-ancestor > a, li.current-menu-ancestor > a:hover {
    background-color: red;
}
li.current-menu-ancestor > a span, li.current-menu-ancestor > a:hover span {
    color: #000;
}
li.current-menu-parent > a {
    background-color: red !important;
}
li.current-menu-parent > a span{
   color: #000 !important;
}

Hope it helps.

[Dave SParticipant]

Thanks for the reply Christopher, but the code had no change.

[RadModerator]

Hi there,

Please try this with your preferred color,

  .x-navbar .x-btn-navbar:active i, .x-navbar .x-nav-wrap .x-nav > li > a:active {
  color: pink !important;
  }

Thanks!

[Dave SParticipant]

Sorry, no luck.

This also doesn’t have any effect.

[ChristopherModerator]

Hi there,

I’m sorry although you’ve provided us with screen shots but it is still unclear what you want. We provided you with code to change background color for active parent but it didn’t help, so please clarify what you are trying to achieve.

Thanks.

[Author]

Posts