Problem with adding a background image to my navbar

Support
#1

Hi everyone,

I have a problem with uploading a background image to my navbar. I already searched in the forum and i saw that somebody else had the same problem and used the given solution from the staff :

.x-navbar {
background-image: url (‘your url’);
background-size: cover;
}

So i tried to upload an image that i have uploaded in the media library with the link : http://testing.fitnessworx.nl/testing.fitnessworx.nl/wp-content/uploads/2017/08/FitnessWorx-1.jpg, like this:

.x-navbar {
background-image: url (‘http://testing.fitnessworx.nl/testing.fitnessworx.nl/wp-content/uploads/2017/08/FitnessWorx-1.jpg’);
background-size: cover;
}

But, unfortunately it isn’t working! How is this possible??

My link is: testing.fitnessworx.nl

Thank you in advance,

With kind regards,

Melvin

#2

Hello @melvinbouterse,

Thanks for writing in!

Please add following CSS under X > Launch > Options > CSS:

.x-navbar-inner {
    background-image: url(http://testing.fitnessworx.nl/testing.fitnessworx.nl/wp-content/uploads/2017/08/FitnessWorx-1.jpg);
}

.x-navbar .x-nav-wrap .x-nav>li>a {
    background-color: transparent;
}

.x-navbar .x-nav-wrap .x-nav>li>a:hover {
    color: #fff;
}

Since navbar has black background you will have to change navbar links and hover color from X > Launch > Options > Header > Links text > Navbar links.

Thanks.

#3

Hi Prasant, thank you for your response, but I think that i explained it wrong.
I want the background image for the the logobar-inner ( see the picture), and I want the navbar to stay how it is right now.

So what can I do to insert the background-image in the logobar?

I tried this code:

.x-logobar {
background-image: url(http://testing.fitnessworx.nl/testing.fitnessworx.nl/wp-content/uploads/2017/08/FitnessWorx-1.jpg;) no-repeat center center !important; (without the emoticon haha)
}

and

.x-logobar-inner {
background-image: url(http://testing.fitnessworx.nl/testing.fitnessworx.nl/wp-content/uploads/2017/08/FitnessWorx-1.jpg;) no-repeat center center !important;
}

but nothing works!

I hope that you can help me and thank you in advance!

With kind regards,

Melvin,

#4

Hello Melvin,

Please try following code instead:

.x-logobar {
    background-image: url(http://testing.fitnessworx.nl/testing.fitnessworx.nl/wp-content/uploads/2017/08/FitnessWorx-1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

Thanks.