Docs

[SixIT]

Hi There,

I’d like to add a texture to the navbar of my website. Ideally having the navbar with a background colour of #46683d and the texture attached with a 30%?

Something similar to ths website http://www.outwardboundcroatia.com/en/

Is there a way of doig this?

Thanks,

Joe

[Jade]

Hi Joe,

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.

[SixIT]

Hi Jade,

We currently have a staging site set up, the URL is here http://0f4.901.myftpupload.com/

Many thanks,

Joe

[Paul R]

Hi Joe,

To achieve that, you can add this under Custom > CSS in the Customizer.

.x-navbar-inner:before {
    background: url(texture.jpg) top center no-repeat;
    background-size: cover;
    content: "";
    width: 100%;
    position: absolute;  
    height: 120px;
    opacity: 0.3;
}

Change texture.jpg with the url of your image.

Hope that helps.

[SixIT]

Hi Paul,

That’s worked perfectly! Is there a way of making the texture repeatable so it doesn’t stretch on larger screens, or will i just have to duplicate the texture and make it wider in photoshop?

Many thanks for the help!

[Paul R]

Hi,

You can change this.

background: url(texture.jpg) top center no-repeat;

to this

background: url(texture.jpg) top left repeat;

Hope that helps

[SixIT]

Hi Paul,

I’ve done that but it still seems to be stretching rather than repeating. Have I missed something?

Thanks,

Joe

[SixIT]

Hi Paul,

Sorry I think I’ve sorted it, for anyone looking on this thread I just removed the {background: cover}.

Thanks again for all the help!

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[SixIT]

Is there a way of adding the same texture to the mobile nav bar dropdown as well please?

Thanks for any help you can provide.

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (max-width:  979px) {
	.x-navbar-wrap {background: url(http://0f4.901.myftpupload.com/wp-content/uploads/2016/12/ywp-texture-1.jpg) top left repeat;}
	.x-navbar {background-color: rgba(70, 104, 61, 0.74);}
}

Hope it helps, Cheers!

[SixIT]

Hi that has kind of worked.However it hasn’t applied the opacity and it hasn’t applied it to the dropdown when the screen view port is smaller (please see attached).

Is there a way of just adding it to the whole .x-navbar rather than just the .x-navbar-inner:before. I seem to be able to add it to the .x-navbar which does add it to the dropdown, however I can’t seem to add the opacity to the texture image css alone, it seems to put a transparency on the whole navbar?

Thanks,

Joe

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width:  1295px) {
 .x-navbar .x-nav-wrap.desktop {
         display:none;
    }

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

.x-navbar .x-nav-wrap.mobile {
    display:block;
}

.x-navbar .x-nav-wrap.mobile.collapse {
    display:none;
}
.x-navbar .x-nav-wrap.mobile.collapse.in {
    display:block !important;
}
}

Hope that helps.

[SixIT]

That’s fantastic! One last thing (sorry). Can I keep the same opacity of 0.1 on the mobile navbar?

Many thanks!

[SixIT]

Sorry again, I seem to have sorted it myself by adding it to the x.navbar and adding the opacity setting to the image itself in photoshop.

Thanks for all the help though guys, you are all so helpful, great customer service!

[Author]

Posts