Docs

[Desmond T]

I need help figuring out how to make the topbar fixed on the website along with the navbar, and how to make the logo display across both the nav bar and logo bar on the left side of the screen, similar to http://www.frsport.com/

http://virtuemotorsports.com/

Here is what I have in my CSS:

.x-topbar {
  height: 30px;
  min-height: 0;
  text-align: right;
}

.x-topbar-inner.x-container.max.width,
.x-logobar-inner>div,
.x-navbar-inner>div {
    width: 100% !important; /*Current value is 88%(your current site width in customizer)*/
    max-width: 1920px !important; /*Current value is 1000px(your current site max width)*/
}

.x-logobar {
text-align: left;
}

.x-topbar-inner.x-container.max.width {
    height: 30px;
    overflow: hidden;
}

[Desmond T]

I deleted that CSS for now, until i get this other issue fixed

[Desmond T]

I followed this post and got the topbar docked with the navbar, but now i need the logo to overlap into the topbar

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

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

a.x-brand.img {
    position: absolute;
    z-index: 9;
    top: 40px;
}

.x-navbar-inner {
    height: 65px;
}

Hope this helps – thanks!

[Desmond T]

Do I need all of this CSS?

.x-topbar {
  height: 30px;
  min-height: 0;
  text-align: right;
}

.x-topbar {
   z-index:1;
}

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

a.x-brand.img {
    position: absolute;
    z-index: 9;
    top: 40px;
}

.x-navbar-inner {
    height: 65px;
}

[Nabeel A]

Hi again,

You can replace the above CSS with suggested Code.

Let us know how this goes!

[Desmond T]

Just replaceing the code does not work correctly. YOu can see what i mean on the website.

[Desmond T]

Can someone explain to me the point of putting this code in seperately rather than just under .x-brand img?

a.x-brand.img {
    position: absolute;
    z-index: 9;
    top: 40px;

[Nabeel A]

Hi again,

I’m not sure what you mean? Can you please explain it bit more? If it’s not working correctly then you can keep all of your CSS.

Thanks!

[Author]

Posts