Background Navigation Style Changes

Support
#1

I’m experimenting with the extended “app” demo trying to put together an idea and wasn’t sure if it was possible by CSS with the current setup.

Website URL: http://www.rocketboysolutions.com/Harrison/
*Currently is very rough and have stock footage to test out if this look is possible.

I currently have “fixed top” saved for the header/navigation. Is there any CSS code I can add to make a colored background behind the navigation when the webpage is scrolled? An example of what I’m referring can be seen at https://www.moxiebridge.com/ Where the logo and nav is transparent on load and then a black background appears once the page is scrolled.

Is it possible to keep the “top bar” active and not scroll away once the page is scrolled? Currently with the App demo the top bar goes away once the webpage is scrolled from the top. Is there a way to add a background to the top bar when the page is scrolled like with the navigation?

Thank you for your input!

#2

Hi Bryce,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here. Please add this to Theme Options > CSS

@media (min-width: 978px) {
	.masthead.masthead-inline {
		position: fixed;
	    top: 0;
	    right: 0;
	    left: 0;
	    z-index: 2;
	}
}
.masthead {
	transition: background-color 500ms ease-out;
}
.masthead.alt-color {
    background-color: #000 !important;
}

Change the #000 value to the background color you desire.

Then add this to Theme Options > JS

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

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

Hope it helps,
Cheers!

1 Like
#3

This helps a lot! Thank you for all the info.

I came across one question but not sure if its outside of the scope. I was adding a drop down menu with the extended demo app and noticed that there was not one. Is there a background code that would make the drop down menu readable? How the drop down menu is can be seen at http://www.rocketboysolutions.com/Harrison/ under the about tab.

If I need help outside of the scope in the future is that something you offer as a paid option? If so what’s the best contact point and rates that you charge?

Thanks Again!

#4

Hi Bryce,

It’s due to this existing CSS,

.x-navbar, .x-navbar .sub-menu {
    background-color: hsla(210,29%,24%,0) !important;
}

Please change it to this

.x-navbar .sub-menu {
    background-color: #000 !important;
}

Hope this helps.

#5

Where is the existing CSS you referenced located? I checked the x child theme and regular theme css and couldn’t find that code via FTP. I was able to add the code you mentioned under theme options CSS and it took effect. The only issue I had with it was there was a delay for the drop down menu to close after the mouse had moved away from the drop down menu. I think this may because the original code is still left somewhere.

Thank You for all your help!

#6

Hi Bryce,

I’m not sure where it was from too since it’s minified, but I’m sure it’s a custom CSS since out theme doesn’t have that. If you can’t find it then you can simply add this CSS at the very last of any of your custom CSS.

.x-navbar .sub-menu {
    background-color: #000 !important;
}

Thanks!

1 Like
#7

I understand, I thought the original CSS code would need to be removed to not conflict. Adding the code did make the change happen but there was a delay for the drop down menu to close that was irregular. I currently don’t have a drop down active but will with the finished product.

When I was updating the theme options under “Renew” the options that I update aren’t working for the mobile menu for example. Is there any settings that would be conflicting with these updates?

Thank you for your help!

#8

Hi Bryce,

Please add your dropdown back so we can take another look.

Please provide us login credentials in a secure note so we can take a look.

Thanks,

1 Like
#9

Thank you for your assistance. I’ll add the secure note.

#10

Hi Bryce,

To fix your submenu issue, you can add the code below in Theme Options > CSS

.x-navbar .desktop .x-nav>li.menu-item-has-children > .sub-menu {
    display: none;
}
.x-navbar .desktop .x-nav>li.menu-item-has-children:hover > .sub-menu {
    display: block;
}

Hope this helps

1 Like
#11

Thanks for that info.

When I was updating the theme options under “Renew” the options that I update aren’t working for the mobile menu for example. Is there any settings that would be conflicting with these updates?

My wordpress admin black bar is overlapped with my top menu bar from the theme options. Is there a way to lower that down when I’m logged in the account?

#12

Hello Bryce,

Thanks for updating the thread. :slight_smile:

I tested and changes the color options in Renew for mobile menu in theme options panel, on my end changes are getting reflected. Probably you need to clear browser cache and try loading the website again.

Please add following CSS under X > Theme Options > CSS:

.logged-in.admin-bar header.masthead.masthead-inline {
    margin-top: 30px;
}

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.

1 Like
#13

Thank you for the info, that code worked great for the masthead on a desktop. It did add extra white space on a mobile sized screen though. Please let me know if you have any suggestions with the below code to correct the mobile spacing change, wasn’t sure why this didn’t correct the problem.

@media (max-width: 979px) {
.logged-in.admin-bar header.masthead.masthead-inline {
margin-top: 0px;
}
}

I apologize for the confusion on the mobile menu. Thank you for the tips with the chrome developer tools!

#14

Hello Bryce,

The code is correct. The problem is that you added it first before the css for the desktop screens. Please edit your custom css and make sure that the code below will be added at the bottom of all your custom css codes.

@media (max-width:979px){
    .masthead{
        position:relative;
        width:auto;
        background-color:#d8f0fb;
    }
    .logged-in.admin-bar header.masthead.masthead-inline{
        margin-top:0px;
    }
}

The correct way of doing it will be in this format:

element {
  // styling css here
}

@media(min-width: 980px){
  element {
    // styling css here
  }
}

@media(max-width: 979px){
  element {
    // styling css here
  }
}

Hope this helps. Please let us know how it goes.

1 Like
#15

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