Docs

[Ann]

Hi there,

I’ve been trying for hours to adjust the padding on my nav bar to not “jump” when scrolling but can’t seem to figure it out. My website here: http://www.marketingofdesign.com/ if you scroll down the logo text and the “Request a quote” jump slightly, how can adjust that to not happen?

Also, the “Request a Quote” is the contact page and when viewing the contact page it’s washed out because it’s active. How can I make it not look “active”. Since I only have one menu item I’m not sure how to set it up.

Hope that makes sense!

Thanks!!

Ann

[Rue Nel]

Hello There,

Thanks for writing in! A noticeable jump is because of your custom css. When you are on top of the page, the navbar has no border. As soon as you scroll down, there is a 1 pixel border. This one pixel is the source of the jump. To be able to resolve this, please have your custom css updated and have it this way;

.home .x-navbar {
    background: transparent;
    border: 1px solid transparent;
}

.home .x-navbar.x-navbar-fixed-top {
    background-color: #fff;
    height: 140px;
    opacity: .9;
    border-color:#f6f6f6;
}

Since you only have one menu item, you can simply change the link color and link hover color using the same color in the customizer. Please go to Appearance > Customize > Header > Links – Text.

Hope this helps.

[Ann]

Ohhhhh that did it all!

I’m sorry for not figuring that out!

Thanks so much for your help Rue!

For the menu item, I’d like it to be different color when you hover over them menu though. Is there another work around?

Thanks,
Ann

[Ann]

Hi Rue,

Can you help me with my mobile nav bar too? It’s pushing the mobile menu down below the logo, making it look weird. I tried the code below but it didn’t work, Probably because its not an image but not sure how to adjust it.

Ann

@media (max-width: 480px) {
.x-brand.img {
width: 80%;
}
}

[Rue Nel]

Hello Ann,

Thanks for updating in! To change the color of the menu item as you hover it, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-navbar .desktop .x-nav > li > a:hover > span {
    color: red;
}

Your logo is pushing down the menu because of its position. You can reposition it by going to the customizer, Appearance > Customize > Header > Mobile Button and insert in the Mobile Navbar Button Alignment (px) at least 20 pixels.

Hope this helps.

[Ann]

Hey Rue,

Menu is working great now, thanks!

For the mobile piece, I change to 20px and it’s still pushing it far below the “marketing of design” text. I’d like it to be on the same row if possible.

Also, is it possible to change the nav bar height on mobile view only?

Thanks

Ann

[Rue Nel]

Hi Ann,

Thanks for updating in! The logo has a top margin. You can make use of this code to minimize it:

@media (max-width: 480px) {
  body .x-brand {
    margin-top: 30px;
  }
}

We would loved to know if this has work for you. Thank you.

[Ann]

Thanks! Worked good for the margin up top. Still struggling getting the mobil menu inline. Its still kinda dropping below the logo text.

Thanks!

Ann

[Christopher]

Hi there,

Please update previous code to :

@media (max-width: 480px){
body .x-brand {
    margin-top: 40px;
    font-size: 15px;
    letter-spacing: 3px;
}
.x-btn-navbar {
    margin-top: 33px;
}
}

Hope it helps.

[Ann]

Worked perfect!

Thank you Christopher!

[Thai]

You’re most welcome 🙂

[Author]

Posts