Logo full width

meganbruzan · April 2016

How can I make my logo be full width across the screen?

http://www.zymbioticsllc.com/Wordpress/

Albert · April 2016

Your logo is 1790px width while it should be same size as wrapper (1040px).

meganbruzan · April 2016

I changed it to 1040 but it still doesn't go to the edge. Does it need to have a certain height ratio?

Albert · April 2016

To move logo to the left edge, you need to use the following css:

.header-stack #Top_bar .logo { padding: 0 !important; }
#Top_bar .column.one { margin: 0 !important; }
#Top_bar .container { max-width: 1040px !important; }
#Top_bar .one.column { width: 100% !important; }

meganbruzan · April 2016

Still a bit of padding on the right side, can that be eliminated?

http://www.zymbioticsllc.com/Wordpress/

Albert · April 2016

Really? We do not see any padding on the right side what you can see on http://pasteboard.co/9GSa7qu.png

meganbruzan · April 2016

There is just a little bit on the right side in Chrome and Safari. I tried in two browsers and see the same:

http://www.zymbioticsllc.com/Wordpress/wp-content/uploads/2016/04/Screen-Shot-2016-04-13-at-9.46.52-AM.png

Albert · April 2016

Ok, got it. To remove empty space on the right side, you need to use the following css as well:

#Top_bar .one.column { width: 100% !important; }

meganbruzan · April 2016

Perfect, thank you!

Albert · April 2016

You're welcome!

acela · December 2016

Hi, new here to BeTheme... Thank you for the CSS code at the top, it is helpful.

But is it only half the story? If you look at Megan's site above shrunk to mobile size, the logo stops being full width and there is a lot of padding around it:

http://www.zymbioticsllc.com/Wordpress/

How can we make the logo(s) full width for all screen sizes? (including the 2nd mobile logo for responsive, if applicable)

Thanks!

Albert · December 2016

@acela To make it full width on the mobile devices as well, you need to use the following css:

@media only screen and (max-width: 767px) {
    #Top_bar .logo #logo { margin: 0 !important; }
}

acela · December 2016

Thanks very much. It looks like I also may need to add a "line-height: normal;" in there in order to make the full-width logo stay flush to the top of the browser viewport on mobile (with no action bar)... Is that right?

Thanks again.

Albert · December 2016

If it has a positive effect on your end then you can use it but we didn't noticed such need on our end.

FFF2012 · April 2017

hi, I've tried applying these styles, but it's not having the effect I'm looking for - would like to have the masthead thingy span the width of the header (same size as slider/picture below it) - any thopughts?

http://asrholiding.com/

Albert · April 2017

@FFF2012 Please make necessary screenshots of what you would like to do for better understanding.

FFF2012 · April 2017

see the banner image at the top? looking to have it be full width

http://asrholiding.com/wp-content/uploads/2017/04/lc_screenshot.jpg

Bryan · April 2017

I see that you have changed the header to a diffrent one.

FFF2012 · April 2017

?? Not really - I'm looking to have that jpg take the entire width - is that doable?

Bryan · April 2017

If you enable it, so I can check it, we can try to use custom css.

FFF2012 · April 2017

I'm not sure what I'm supposed to enable - responsive is on. I'm trying to make example A look like example B (see pic)

http://asrholiding.com/wp-content/uploads/2017/04/LC_ab.jpg

Bryan · April 2017

Please show me THIS view that you presented in the picture on your website. Send a dirct link to the page where this image is placed.

FFF2012 · April 2017

http://asrholiding.com/ (any page)

(on a phone or a reduced width browser window to make it responsive)

thanks

Bryan · April 2017

Use this css

@media(max-width:767px) {
	#Top_bar > .container {
	width:100% !important;
	max-width:100% !important;
}
#logo img {
	width:100% !important;
	height:auto !important;
}}

FFF2012 · April 2017

whooo hooo!!! worked like a charm! thanks!!!!!!!!

deviniae · January 2018

Hi, have tried the above codes and still my image at the top is not full width like my slider below the menu. I want a full width image above my menu. Help please

Bryan · January 2018

deviniae
All pages are different, please paste a link to tyour page and a screenshot describing what you want to do.

deviniae · January 2018

Ok, I can't post the page because its on 'coming soon' mode but I will show you in an image.

The Thymeonmyhands logo at the top center with the flowers behind it, I want that to be full width on any device.

I put in some of the code you supplied for other people above but that made my other logo go full width on the navbar/menu

Thanks for your help

deviniae · January 2018

http://www.mediafire.com/file/bipx1w681o8ik4c/betheme logo issue.jpg

Incase that image link didnt work before.

Bryan · January 2018

I would have to see the website cod ein order to help you with custom css. It is not possible with theme options.
thanks

deviniae · January 2018

https://thymeonmyhands.co.uk/

Ok I have taken off coming soon mode.

Logo full width

Comments