Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #469709

    Hello,
    Thank you for this great theme and your help via these forums. I’ve been able to tweak a lot just by reviewing previous tickets.
    I have an issue with the logo on mobile devices at the website provided in the private link area. Once the screen width is below a certain number of pixels, the theme correctly makes the logo smaller, adds the “hamburger” menu for mobile, and eventually makes the logo smaller. All of that is good.
    But when the logo is made smaller, additional white space is shown below the logo and the content of the page. Note on the home page, I have the slider element turn OFF once a specific width is reached (for small mobile devices).
    I’ve included all of the custom CSS I have added below.
    Suggestions to still have the logo get smaller for mobile devices, but get rid of the extra white space?
    Steve

    .custom_content{
    position: absolute;
    top: 25px;
    right: 25px;
    }
    
    .custom_content { z-index: 999; }
    
    @media only screen and (max-width: 850px) {
    #header_main { height: 140px; }
    .custom_content { top: 80px; }}
    
    .small-preview{ display: none !important; }
    
    /* The following class will SHOW elements when width is below */
    @media only screen and (min-width: 671px) {
    .sig-show-mobile { display: none; }}
    
    /* The following class will HIDE elements when width is below */
    @media only screen and (max-width: 670px) {
    .sig-hide-mobile { display: none; }}
    
    /* Let's get the responsive menu to kick in earlier since it was crunching with logo. */
    @media screen and (max-width: 900px) {
    nav.main_menu { display: none !important; }
    #advanced_menu_toggle { display: block !important; }
    }
    
    /*Get the background of the partner/logo element truly transparent. Images are PNG */
    .main_color .avia-content-slider .slide-image { background: transparent; }
    
    /* Move the main menu down a bit */
    .main_menu ul:first-child > li > a {
        line-height: 225px  !important;
    }
    
    .header-scrolled .main_menu ul:first-child > li > a {
        line-height: 62.5px  !important;
    }
    
    /* Hide the comments column on the 404 error page [sjm 20150706] */
    .error404 .widget_tab_comments { display: none!important; }
    #470156

    Hi spidercreations!

    Thank you for using Enfold.

    This code adjusts the height of the header:

    @media only screen and (max-width: 850px) {
    #header_main { height: 140px; }
    .custom_content { top: 80px; }}

    You can add another media query for smaller screens:

    @media only screen and (max-width: 768px) {
    #header_main { height: 90px; }
    }}

    Regards,
    Ismael

    #470221

    Perfect. Thank you so much.

    Steve

    #470602

    Hey!

    Glad we could help :)

    Best regards,
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Logo Size and Extra Space Below Logo on Mobile’ is closed to new replies.