Trying to increase the logo size ?

BB Theme
1

I always seem to get stuck with header issues :frowning:
I have a logo that is 160px high, but it only displays 103px high.
I’ve tried everything I can think of - and searched here in the forums - I’ve found discussions on reducing the logo size, but not increasing it ?
I’m pretty sure the trick is to increase the size of it’s container, but I’m stuck on that!
Note there is some CSS in the Code >> CSS Code for other things, but I took it all out and no change!
TIA, Dave

ps -Site is close to being deployed & is here:
http://everythingsarchie.com/demo/

2

Just a quick update - I have since had some success but using Microthemer.
But would still like to know how to do this without extra tools…
Regards, Dave

Below is the CSS Microthemer generated (502 x 160 is the actual image size

/*** Microthemer Styles ***/
/* =Header
-------------------------------------------------------------- */
/* Logo */
div.fl-page-header-logo img.fl-logo-img {
	max-width: 502px !important;
	height: 160px !important;
}

/* =Content
-------------------------------------------------------------- */

/* Large Desktop
************************************************************************/
@media (min-width: 1200px) {

	/* =Header
	-------------------------------------------------------------- */
	/* Logo */
	div.fl-page-header-logo img.fl-logo-img {
	}
}

/* Tablet & Phone
************************************************************************/
@media (max-width: 767px) {

	/* =Header
	-------------------------------------------------------------- */
	/* Logo */
	div.fl-page-header-logo img.fl-logo-img {
		max-width: 251px !important;
		height: 80px !important;
	}
}

/* Phone
************************************************************************/
@media (max-width: 480px) {

	/* =Header
	-------------------------------------------------------------- */
	/* Logo */
	div.fl-page-header-logo img.fl-logo-img {
		max-width: 251px !important;
		height: 80px !important;
	}
}
3

Hey Dave,

That’s because the container width for the logo is set to 33%. Using the CSS snippet below should override that. You can adjust the values as necessary.

@media (min-width: 768px) {
	/* Change width of the logo container */
    .fl-page-header-primary .row > div:first-child {
        width: 50%;
    }
	/* Change width of the nav container */
    .fl-page-header-primary .row > div:last-child {
        width: 50%;
    }
}

Ben

4

Thanks Ben, appreciate that…
Dave

5

Hey Dave,

No worries at all! I’m gonna add that to the Theme CSS Snippets section soon. :slight_smile: Have fun!

Ben

6

[Content Hidden]

7

Hey Aaron,

The code above, and any other CSS codes, can be placed under Appearance > Customize > Code > CSS Code.

Ben

8

[Content Hidden]

9

No worries at all, Aaron! Glad we could help. :slight_smile:

Enjoy!

Ben