[John EzraMember]

Hi there,

Thanks for updating the thread! May I ask for a little more clarification on what you would like to achieve. It seems though your logo looks correct on our end. Maybe we are just missing what you mean. If you wouldn’t mind helping us understand better so we can advise accordingly, that would really help. Thanks!

[ShortaxeParticipant]

Thanks for sticking with me.
I want to pull the bottom of the navbar closer to the logo, and to make the transition slower like on the website: http://kottongrammer.com/

Thanks again

[Rue NelModerator]

Hello There,

Please update the code and use this code:

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
  transition: all 0.85s ease;
  -webkit-transition: all 0.85s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
  -webkit-transition: height 0.85s ease, padding-top 0.5s ease;
  transition: height 0.85s ease, padding-top 0.85s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-brand img {
  -webkit-transition: all 0.85s ease;
  transition: all 0.85s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 120px;
margin-top: 4px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

And your logo has a white space underneath the logo. The logo needs to be edited to remove the white space and will make it closing to the bottom of the navbar.
http://prntscr.com/b3g7rk
http://prntscr.com/b3g82p

Hope this helps.

[ShortaxeParticipant]

Thanks that definitely helped the navbar length – cannot believe I didnt think about the image size.. sigh.

The logo is still not scaling smoothly, it does so instantly with a jerk. Also do you know why the logo is moving in opposite direction of the navbar linktext (meaning when it minimizes the logo seems to jump UP then roll down. Whereas the text behaves logically and just rolls up).

Thanks again agian!

[Rue NelModerator]

Hello There,

Please remove this block:

.x-navbar.x-navbar-fixed-top .x-brand {
    width: 220px;
    margin-top: 4px;
}

You need to replace it with this ocde:

.x-navbar .x-brand img{
    width: 350px;
    -webkit-transition: all 0.85s linear;
    transition: all 0.85s linear;
}

.x-navbar.x-navbar-fixed-top .x-brand img {
    width: 220px;
    -webkit-transition: all 0.85s linear;
    transition: all 0.85s linear;
}

Hope this helps.

[ShortaxeParticipant]

YOU ARE A GENIUS!
Thank you so much, everything is perfect now 🙂
How can I recommend such excellent support?

[ChristopherModerator]

You’re most welcome.

[ShortaxeParticipant]

Oh I have ONE more request. Is it possible to disable the scaling navbar for mobile devices and just have a smaller static navbar so the menu button wont be pushed down.
http://jacoblindseo.com

Thanks!

[ChristopherModerator]

Hi there,

Please update your code to :

@media (min-width:480px){
.x-navbar .x-brand img{
    width: 350px;
    -webkit-transition: all 0.85s linear;
    transition: all 0.85s linear;
}

.x-navbar.x-navbar-fixed-top .x-brand img {
    width: 220px;
    -webkit-transition: all 0.85s linear;
    transition: all 0.85s linear;
}
}

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

Hope it helps.

[ShortaxeParticipant]

Definitely useful yes. Thanks

[RadModerator]

You’re welcome!

[Author]

Posts