Docs

[Misho]

Hi guys,

Can you give me a hand with some (small) 🙂 CSS?

I am trying to inject the SVG separator below the navigation on all pages. It is basically a 14 X 5 px SVG image, repeated on the X-axes below the navigation, which goes above the first section in z-index order. (Please see screenshot).

I am trying variations of this:

.x-navbar-inner::after {
  content: url(http://example.com/wp-content/uploads/divider.svg);
  background-repeat: repeat-x;
  position:relative;
  z-index:999;
}

But so far no luck. :/

Thanks!

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Misho]

This reply has been marked as private.

[Rad]

Hi there,

Please add this CSS,

.x-navbar-wrap:after {
    content: "";
    display: block;
    width: 100%;
    z-index: 1000;
    position: relative;
    background-repeat: repeat-x;
    background: url(http://zlato.kreditni-kalkulator.hr/wp-content/uploads/divider-zlato-wh.svg);
    height: 4px;
}

That should do it 🙂 Cheers!

[Misho]

Close. 🙂

Now it is there, but it disappears on scroll, under the nav. It should stay fixed below it.

Thank you for your great support!

[Paul R]

Hi,

Please change your code to this.

body .x-navbar {
    background-color:transparent;
}

body .x-navbar:after {
    content: "";
    display: block;
    width: 100%;
    z-index: 1000;
    position: relative;
    background-repeat: repeat-x;
    background: url(http://zlato.kreditni-kalkulator.hr/wp-content/uploads/divider-zlato-wh.svg);
    height: 4px;
}

body .x-brand img {
    z-index: 9999;
}

Hope that helps.

[Misho]

Perfect!

In addition, I have removed the bottom border:

body .x-navbar {
    background-color:transparent;
    border-bottom:none;
}

Also, repeat-x works only with !important. This is necessary for Firefox, because I needed to add one more pixel of height, so it doesn’t get cut-off on the bottom.

This is the final code:

body .x-navbar {
    background-color: transparent!important;
    border-bottom: none;
}
body .x-navbar:after {
    content: "";
    display: block;
    width: 100%;
    z-index: 1000;
    position: relative;
    background-repeat: repeat-x!important;
    background: url(http://zlato.kreditni-kalkulator.hr/wp-content/uploads/divider-zlato-wh.svg);
    height: 5px;
}
body .x-brand img {
    z-index: 9999;}

I am still searching for the fallback for background-color:transparent; on Android Chrome browser. Currently there is a white background bellow.

Thank you very much! 🙂

[Friech]

Hi Misho,

Would you mind providing us a screenshot, please. I cant seem to find that white background.

Thanks.

[Misho]

Well I cannot see it anymore also. It is gone. 🙂

Thank you!

[Rupok]

Thanks for updating. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Misho]

Hi, me again. 🙂

It took me a while to realize…

There IS a white background on mobile, but on other pages. We didn’t see it on the homepage because I gave a negative top margin to the first section, which made it go under the navbar, hiding the white background. So it seems that the ::after content is still between the navbar and the section, instead going over the first section.

I am trying to find a way either to make it go over the first section. If you have an idea, it would be great!

If not, I’ll just pull the first section up globally with #x-section-1 {margin-top:-5px!important;} 🙂

Thank you!

[Joao]

Hi There,

If you want to get rid of that the white background of your navbar on mobile and vertical tablets

Please add this following code to your Appereance / Customizer / Custom / CSS

@media (max-width: 767px) {
    
  .x-navbar {
    height: 0;
 }
  
}

Hope that helps,

Joao

[Misho]

Height?

I feel so stupid now. What was I thinking. :/

Thank you very much!

[Lely]

You’re welcome!

Cheers!

[Author]

Posts