logo cannot go full width

[kickinknowledge]

We have a website http://www.evariiwatch.com – and as you can see, or logo is a banner. We would like it to be fullscreen, and extend the width to the right and left. Is this possible? I’ve been playing with the CSS but it seems like the logo is stuck in a box and won’t go wider?

[sharmstr]

Try this

.kleo-main-header .container {
max-width: 100% !important;
}

Also, you banner (logo) is only 1316px wide. It will never fill the entire width on large screens.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[kickinknowledge]

I have increased the size of the banner to 1920px by 250px. Your solution covers the main navigation, so I added in this .logo img { width: 100% !important; max-height: 135% !important; } – but now it’s all distorted again, any suggestions?

Also, is 1920px the best width for full screen images?

[sharmstr]

.navbar-header {
height: 100% !important;
line-height: 100% !important;
max-height: 250px !important;
}
.logo img {
width: 100% !important;
max-height: 100% !important;
}

Yes, 1920 is good.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[dennisadonis]

Hi there,

Not sure if I should bump this thread, or start my own, but I have some supplementary questions related to the same topic. I’ve just bought and installed Kleo theme here: http://administrexdemo.expoco.com.au/

I’m trying to recreate the layout in the attached screengrab, so I’m hoping you can answer the following:

1. Is it possible to have the Navigation Bar sticky, and let the rest of the Header section scroll up normally?
2. Is is possible to have a different Header and Nav on the BuddyPress/BBPress pages? I’d like a very simple Nav on these pages, so it doesn’t clash with the user’s cover picture.
3. Is it possible to add a 1 pixel white border around the Navigation Bar, and the Menu items, similar to the screengrab?
4. Finally, there is a 1px white gap on the left of the Logo, even though I have the full width code you’ve provided above – do you have a fix for this?

Thank you in advance for your help!

Attachments:

You must be logged in to view attached files.

[Author]

Posts