Docs

[[email protected]]

Hello!

First off – awesome theme, awesome support!

Here’s a question I haven’t really been able to find a good answer to.

I want to have an image containing a logo and some graphics to sit above the navbar, always. The image height is 102 px. I have solved this by setting “padding-top=102px” for the Navbar. This works ok, but when I create a new page, the top (102 pixels, I suspect) will be hidden under the Navbar. This can be solved with some top-margin, off course, but I wonder if there’s a better solution to achieve the look I want? Any suggestions?

To make things more complicated I have one-page-navigation on the start page and while the page loads just fine, with the desired distance between the Navbar and the content below, as soon as I scroll there’s a huge gap (102 px?) between them.

Here’s the page I’m working on:
http://ichbinanders.se/peps/

And here’s my custom css:

.x-topbar {
background:url(http://ichbinanders.se/peps/wp-content/uploads/2016/10/starttopp.png) no-repeat top center;
background-size: 100% auto;
}

@media (min-width: 980px) {
.x-navbar, .x-navbar.x-navbar-fixed-top {
}

.x-topbar {
min-width: 41px;
position: fixed;
width: 960px;
height: 102px;
top: 0;
}

.x-navbar-inner {
background:url(http://ichbinanders.se/peps/wp-content/uploads/2016/10/starttopp.png) no-repeat top center;
background-size: 100% auto;
padding-top:102px;
}

Any help much appreciated!

[Paul R]

Hi,

You may change your code to this.

@media (min-width: 980px) {
.x-topbar .x-topbar-inner {
    background:url(http://ichbinanders.se/peps/wp-content/uploads/2016/10/starttopp.png) top center no-repeat;
    background-size: 100% auto;
}

.x-navbar {
    position: fixed;
    width: 100%;
    top:102px;
}

.x-topbar {  
    position: fixed;
    width: 100%;
    height: 102px;
    top: 0;
}
}

Hope that helps.

[[email protected]]

Thank you! Yes, almost!

Only now the topbar i gigantic when you enter the page. As soon as you scroll it jumps into position. Also: I removed the top:102px from x-navbar, since that created a distance at the top.

Here’s what I have now:

@media (min-width: 980px) {
.x-topbar .x-topbar-inner {
background:url(http://ichbinanders.se/peps/wp-content/uploads/2016/10/starttopp.png) top center no-repeat;
background-size: 100% auto;
}

.x-navbar {
position: fixed;
width: 100%;
}

.x-topbar {
position: fixed;
width: 100%;
height: 102px;
top: 0;
}
}

[[email protected]]

This reply has been marked as private.

[Joao]

Hi There,

Remove the CSS you have added on Appereance > Customizer > Custom > CSS

And follow this thread:

https://community.theme.co/forums/topic/make-topbar-fixed-with-navbar/#post-94848

Hope it helps

Joao

[[email protected]]

Ok, thanks! Will try that!

[[email protected]]

Worked like magic! Thank you ever so much!

[[email protected]]

Actually, I was a little fast there. For some reason it works perfectly in Safari, but in Chrome and Firefox there’s still a glitch when I scroll.

When you said “remove the css you added”, did you mean ALL of it, including the I had already added on my own, or just the bits added in this thread, by your support?

[Joao]

Hi There,

I was referring to any CSS that you added related to trying to make your Topbar fixed.

I have tested your website on my PC Chrome and Firefox and your navbar and topbar are fixed and I could not see any glitches.

Please clean your cache and test it again.

Let us know how it goes,

Joao

[[email protected]]

Thank you! However, I didn’t quite work for me.

I found another solution that doesn’t involve the Topbar at all. Actually, it was already there in my first post, it’s just that I had a lot of other confusing css around it.

Here’s what I’m down to now:

.x-navbar-inner {
background:url(“imagepath”) no-repeat top center;
background-size: 100% auto;
padding-top:102px;
}

Topbar is turned off in Header settings.

Works great now!

Thank you!

[Joao]

Glad to hear it,

🙂

Thanks for sharing your solution,

Joao

[Author]

Posts