Virtue Theme – Logo full page width

Hey Peter, if you would like it to be full width try setting it as the header background image in Theme Options > Advanced Styling. Then you can remove the logo by adding this to your custom css box in Theme Options > Advanced Settings:

#logo {
display: none;
}

Hope that works for you!

Hannah

Hi Hannah,

Thanks for your suggestion. Unfortunately it didn’t work. Once I remove the logo the background doesn’t show even though I have entered the custom css you suggested.

Any other ideas?

Thanks

Peter

Hi Hannah,

Just to add to this no background images shows when I haven’t deleted the logo but added the code you suggested.

Thanks

Peter

What happens when you set the logo image as the header background in theme options > advanced styling?

Hi Hannah,

when I insert the code it removes both the logo and the header background

Thanks

Peter

Ok, don’t use the code. Just upload the image as your header background. What happens then?

Same thing. If there is no logo then the header background doesn’t show.

Hey,
Because this theme isn’t designed for a full width logo it’s going to take a workaround. If you know coding and css I would recommend just using a child theme and doing the custom workaround.

But with the current theme options your more limited. Keep the background set for the header, then just add this css:

.col-md-12>#logo {
    min-height: 300px;
}
.headerclass {
    background-size: cover !important;
}

Kadence Themes

It worked. Thank you very much.

Peter

Hi, I have one other issue with the header.

My background image cuts off part of the top and sides. How to I change the settings to show the entire image ?

Thanks

Peter

You can use

.headerclass {
background-size: contain !important;
}

But that will mean that your image isn’t the full width of your browser page. Will look strange.

Maybe you are talking more about the topbar covering some of your logo?

In that case you can use this css:

.headerclass >.container {
    width:100%;
    padding:0;
    background: url(https://business2thecloud.com.au/wp-content/uploads/2015/03/Logo2-copy.jpg) no-repeat center center;
    background-size:cover;
}

Kadence Themes

Hi,
I have few clarifications regarding the free Virtue theme i am currently using:
1. Can I make the Header full width in this theme, like Pinnacle(i used Pinnacle for other website-Fan of Kadence themes). I am using an Autoplay & looped video feature currently to make it more appealing i need full width. if yes, what CSS should be used for the same?
2. How can I reduce the gap between the Logo & header?
3. Is it possible to add text(Title) on the header video & lastly
4. How can i make my Menu & Logo sticky so the even when a visitor scrolls he should see the Menu.

thanks in advance.

Syed

Hi syedkhadri,
Do you mind starting a new thread and providing a link to your site?
Thanks!

Hannah