[davidgaizParticipant]

Hi there,

I’m trying to adjust my navigation and top bar area to achieve something closer to the example I attached. Is it possible to have the logo span the height of both the menu and the top bar?

If not, can I have some help in fixing the top bar to the top, and adjusting the height on it so it’s not as tall with as much blank space?

Also with the top bar, I’m looking to add a little space between the phone number and the book online button.

Lastly, I’m looking to figure out how to change that red color that shows up above the navigation menu items to the color #0072bc, how do I do that?

Thanks! – Login info provided in the next message

[davidgaizParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

It would be better if you restrict the height of the Topbar. You can add this under Custom > CSS in the Customizer.

.x-topbar {
	height: 46px;
}

Cheers!

[davidgaizParticipant]

Hi Rupok,

Thanks, I can give that a shot. What about having the logo take up the height of the menu bar and the top bar combined as shown in the example photo? Can you provide some info on that?

Can you also provide info on how to change that red color I referenced above?

Thanks!

[Paul RModerator]

Hi,

To achieve that, you can add this under Custom > Edit Global CSS in the Customizer.

@media (min-width: 979px) {
.x-topbar {
    z-index: 1000;
}

.x-brand.img {
    position: absolute;
    margin-top: -40px;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 80px;
}

.x-navbar-inner {
    min-height: 80px;
}

.x-navbar .desktop .x-nav > li > a {
    height: 30px;
    padding-top: 10px;
}
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 blue;
}

Hope that helps.

[davidgaizParticipant]

Thanks Paul you’re awesome! It’s really close, attached a screen shot.

How can I remove that thin black line that’s going right through the logo? I think that was the dividing line between the header and the top bar. 2nd thing, when I scroll down, the top bar section disappears and the nav jumps a bit. Anyway to lock everything down so it’s all anchored to the top and when you scroll down nothing moves?

Lastly, if I wanted to just get rid of the blue bar that hovers over the nav items completely, can I do that somehow?

Thank you, I really appreciate the help!

[JoaoModerator]

Hi There,

Please add the following code to Appereance CUstomizer Custom CSS to remove the black line and the blue line.

.x-topbar {
    border-bottom: 0px;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

To make the topbar fixed, #1. 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-topbar').addClass('x-topbar-fixed-top');
                }else {
                        $('.x-topbar').removeClass('x-topbar-fixed-top');
                }   
  }).scroll();
});

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

.x-topbar.x-topbar-fixed-top {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}
.x-navbar.x-navbar-fixed-top {
	top: 46px;
}

Hope it helps

Joao

[davidgaizParticipant]

Hi Joao,

Unfortunately most of those fixes didn’t work. The only thing that really got fixed was eliminating the blue bar hovering above the menu item. Otherwise there’s still a thin line inbetween the menu and the top bar, and the top bar still disappears when scrolling down.

Any other ideas?

Thanks

[JoaoModerator]

Hi There,

Did you change the provided credentials?

Can you provide working credentials so we can take a look?

Thanks

[davidgaizParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

I have added the same Javascript code but then added this CSS instead:

.x-topbar.x-topbar-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
.x-navbar.x-navbar-fixed-top {
    top: 46px;
}
.admin-bar .x-navbar-fixed-top{
    top: 78px;
}
.admin-bar .x-topbar-fixed-top{
    top: 32px;
}

See attached screenshot. No thin line and fixed top bar.
Hope this helps.

[davidgaizParticipant]

Hi Lely,

I’m still seeing the thin line between the top bar and nav bar even with that code added in. And now the top & menu bar go partly transparent and flicker along with the rest of the site when scrolling – see youtube link below.

[RadModerator]

Hi there,

It’s due to gap and shadow, it’s quite hard to distinguish but please add this CSS too.

.x-navbar {
box-shadow: none;
}

Thanks!

[davidgaizParticipant]

Thanks @rad, that fixed the thin line between the nav bar and top bar. But I’m still having that weird flickering problem referenced in the post above and shown in the video. Any ideas on that?

Thanks

[Rue NelModerator]

Hello There,

Thanks for updating in! The flickering is cause by the custom JS you have added. Please remove it and you can make this JS code instead:

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

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

[Author]

Posts