Trying to increase the logo size ?

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Theme / Trying to increase the logo size ?

This topic is: resolved
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #75319

    Dave
    Participant

    I always seem to get stuck with header issues 🙁
    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/

    #75326

    Dave
    Participant

    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;
    	}
    }
    
    #75365

    Ben Carlo
    Keymaster

    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

    #75391

    Dave
    Participant

    Thanks Ben, appreciate that…
    Dave

    #75403

    Ben Carlo
    Keymaster

    Hey Dave,

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

    Ben

    #114765

    Aaron
    Participant
    This reply has been marked as private.
    #114908

    Ben Carlo
    Keymaster

    Hey Aaron,

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

    Ben

    #115044

    Aaron
    Participant
    This reply has been marked as private.
    #115139

    Ben Carlo
    Keymaster

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

    Enjoy!

    Ben

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘Beaver Builder Theme’ is closed to new topics and replies.