Docs

[brandonlipman]

I am trying to style my navigation like on this site http://www.growthgeeks.com/. Key things I am looking to duplicate.

1. The logo aligns left and is transparent to start and changes state based on what color is in the background.
2. When scrolling the nav stays on top and has a white background.
3. Menu items are all aligned to start at the right.
4. Ability to put emphasis/circle on one of the menu items.

I don’t mind using UberMenu plugin if that is easier. My site is lipmanb.com.

Thanks,

Brandon Lipman

[Rupok]

Hi Brandon,

Thanks for writing in! This customization would be tricky but let me try to assist you as much as I can.

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

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
      $('.x-logobar').addClass('x-logobar-fixed-top');
                }else {
                        $('.x-logobar').removeClass('x-logobar-fixed-top');
                }   
  }).scroll();
});

You can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
  background-color: rgba(255, 255, 255, 0.9);
}

.x-logobar.x-logobar-fixed-top {
  background-color: transparent;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 99999;
}

.x-logobar.x-logobar-fixed-top .x-logobar-inner {
  padding: 0;
}

.x-logobar.x-logobar-fixed-top .x-brand.img > img {
  width: 90px;
  margin-top: 5px;
  margin-left: 50px;
}

.x-navbar.x-navbar-fixed-top {
  background-color: #fff;
}

Let us know which menu item you want to make like circle.

Thanks!

[brandonlipman]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for providing credentials, I really appreciate this as it helped to test the code better. I have updated teh JavaScript a bit :

jQuery( function($) {    
      $(window).on("scroll", function () {    
        var scrollPos = $(window).scrollTop()
    if (scrollPos > 300) {
      $('.x-logobar').addClass('x-logobar-fixed-top');
                }else {
                        $('.x-logobar').removeClass('x-logobar-fixed-top');
                }   
  }).scroll();
});

And it seems working fine now. Let’s check and let me know if you see anything wrong.

Cheers!

[brandonlipman]

Hi Rupok,
Well, we are moving in the right direction. Here is a video (with sound) that hopefully will help clear things up.
<iframe width=1280 height=760 frameborder=”0″ scrolling=”no” src=”//screencast-o-matic.com/embed?sc=cDXjqDj8D3&v=5&ff=1″ allowfullscreen=”true”></iframe>

http://screencast-o-matic.com/watch/cDXjqDj8D3

The logo size will be the 240 X 38 (I am using GrowthGeeks.com logo and I will recreate a logo to match that).

[brandonlipman]

Also, please be sure to test it by resizing your browser to see if it behaves correctly. Thank you!

[Rupok]

Hi there,

Thanks for writing back. Yes you might need to adjust some styles like the hover color if you need and the correct logo image etc. I think the major part is done and further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts