Docs

[AlCAt]

Hi,

I would like to merge the top bar/logo bar/nav bar together so I can use one image background. Can this be done?

Thank you,

[Jade]

HI there,

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

.x-topbar,
.x-navbar,
.x-navbar-inner {
    background-color: #1f2c39;
}

Please change the value of the background color to what you require.

Thanks!

[AlCAt]

Hi Jade,

Thank you for your reply. I’m actually trying to put an image for the background instead of a color.

[Rupok]

Hi there,

This could be possible settings the background image to the header and transparent background to Topbar, Navbar and Logobar.
You can try adding this under Custom > CSS in the Customizer.

header.masthead {
  background-image: url("http://path/to/your/image.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.x-topbar, .x-navbar, .x-logobar {
  background-color: transparent !important;
}

Let’s change http://path/to/your/image.png with your uploaded image URL.

Cheers!

[AlCAt]

Hi Rupok!

I have applied the CSS but it doesn’t work. I just have a white background everywhere.

[Nabeel A]

Hi there,

Thanks for writing in! Can you please provide the URL of your site so we can take a look?

Thanks!

[AlCAt]

This reply has been marked as private.

[Rupok]

Hi there,

I can’t see the suggested code on your site. Did you add them properly? I have tested the code and should work fine if you add them properly. Also make sure your other codes are closed properly and don’t forget to change the image path.

Thanks!

[AlCAt]

This reply has been marked as private.

[Christopher]

Hi there,

There was a missing curly bracket in your code, I went ahead and closed it. The background is showing fine now.

Hope it helps.

[AlCAt]

Hi Christopher,

Thank you for fixing it. It works well on my end as well.

I have 2 more questions:

1. Can I add a black fading from the top and from the bottom of the background image to have my menu and social media icons pop up?

2. How can I reduce the space between my background image bottom and the line on my homepage? ( I have added the line using visual composer but I can’t bring it up higher).

Thank you in advance!

[Christopher]

Hi there,

Find this code :

.x-topbar, .x-navbar, .x-logobar {
  background-color: transparent !important;
}

And update it to :

.x-topbar, .x-logobar {
  background-color: transparent !important;
}

#2 Please remove empty custom headline element. Also remove gap element.

Hope it helps.

[AlCAt]

Thank you!

1. It’s working but only for the navbar. I would like to apply it as well on the top bar. Also, is there a way to fade without having a clear line cut beween the nav bar and the logo bar, and between the top bar and the logo bar?

2. I removed the gap and headlines block but I still have the same space as I put the line on top of everything. Is there a way to reduce it more?

[Joao]

Hi There,

1- Please clarify what you are trying to achieve, provide a screenshot explaining or a mockup of what you would like.

2- You can add the following code to appereance > Customizer > Custom > CSS

To remove the space above the line:

.x-container.offset {
    margin-top: 0px !important;
}

Or Below:

.x-content-band {
    margin-bottom: 0px !Important;
}

Hope that helps

Joao

[AlCAt]

Hi Joao,

Thank you for the CSS.

For the clarification,I have attached a screenshot from another website. There is a black fading on top of the photo to enhance the social media buttons. Is it from CSS or do I have to edit my photo?

[Author]

Posts