Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #176125


    When I run firefox initially having cleared the cache before the logo image leaves very little and from there ok.
    In safari and chrome sometimes appears and sometimes not.
    In explorer always work well.

    What’s the problem?

    I have the following quick changes in the css:

    .logo { top: 10px; padding: 10px; position:relative; height: 200px; line-height: 200px; }

    #header_main { background-color: #600319; border-width: 0px;}

    #header_meta {
    border-top: medium none;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2) inset;
    min-height: 30px;
    z-index: 400;

    without these changes work properly, what happens is that the logo I want to have bigger and that part of the header and subheader (where the breadcrumb) have a background color.




    i add, the problem in chrome/safari is only when i reload directly with browser button. navigating in pages is oks.


    any solution?

    king regards…




    The logo file you are using is far too big. Re-size it to the size you want it to display at and then you can use this css to increase the size of the logo/menu area if you want:

    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
    height: 116px;
    line-height: 116px;

    Edit: The css should go inside the custom.css file in your css folder and then inside the desktop media query.


    • This reply was modified 4 years, 1 month ago by  Devin.

    Hi Devin,

    I modified the file custom.css to enfold / css and I have put on the desktop css media query you said.

    @media only screen and (min-width: 768px) {
    /* Add your Desktop Styles here */
    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
    height: 300px;
    line-height: 300px;

    I have increased the value of the logo from 167 to 300px.

    Logo.png image also I left at 300px and I uploaded it to wordpress.

    The result is:

    1) Explorer, chrome and safari ok.
    2) Firefox when page load first (HTTP code 200) very small image returns. When subsequent load (HTTP code 304) the image correct returns.
    3)Without modifying the css and upload a 150px image also happens.

    It seems to be a problem only with the first load firefox.
    Try to make a reload in firefox by pressing the “shift” key to clear the cache and you’ll see.

    167px is very small for customers…;), they want to see your logo bigger ;)

    As I can do to fix it?

    Thank you!



    Traditionally customers want to see your product/services and the logo is pretty far down on what they want or need to see which is why by design the header is small on the majority of website you’ll see (including in enfold).

    In Firefox I’m having no issues loading up the larger logo on any page load.


    i devin, yes but my customers want big logo ;).

    the issue exist. shift key + reload page in firefox for imac and the logo is super little.




    Hi, whith chrome don’t works too sometimes……..

    I put my code of “custom.css”.


    @media only screen and (min-width: 768px) {
    /* Add your Desktop Styles here */

    h1, h2 {
    font-family: “brandon-grotesque”,sans-serif; font-weight: 900; font-style: normal;

    h3, h4, h5, h6 {
    font-family: “brandon-grotesque”,sans-serif; font-weight: 900; font-style: italic;

    /* META */
    #header_meta { background: #600318; }

    /* HEADER */
    #header_main { height: 200px; line-height: 200px; background: #600318; border: none; }
    #header_main .logo { height: 200px; line-height: 200px; top: 0px; }

    {height:25px; top:75px; right: 0px;}

    .main_menu ul li a {height: auto !important; line-height: 40px !important; }

    /* MENU 1 */
    .main_menu ul:first-child > li > a
    { font-size: 20px; font-family: “brandon-grotesque”; color: #FFFFFF !important; padding:2px 7px; }
    .main_menu ul:first-child > li > a:hover
    { color: #5B8C00 !important; }

    /* MENU 2 */
    #top .main_menu .menu li ul a
    { font-size:12px; line-height: 9px !important; font-family: “Source Sans Pro”; color: #000000 !important; }

    /* TITULO */
    .title_container .main-title { display: none; }

    #top .woocommerce-tabs .tabs li a {
    cursor: pointer;
    margin: 0px 0px 0px 0px;
    display: block;
    float: left;
    z-index: 2;
    position: relative;
    padding: 12px 16px;
    top: -1px;
    font-size: 11px;
    -moz-user-select: none;
    border-style: solid;
    border-width: 1px;


    Thanks so much!!!




    I wonder if the logo resize script doesn’t work properly in your case. Try following – open up enfold/js/avia.js and replace

            if(navigator.appVersion.indexOf("MSIE 7.") == -1)


            if(navigator.appVersion.indexOf("MSIE 7.") == -1)



    Hi Dude,

    oh yeahhhh, now works perfectly!!!

    Thanks so much!!


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

The topic ‘bad load logo image with css changes’ is closed to new replies.