Okay
  Public Ticket #246004
Mobile Header
Closed

Comments

  •  21
    Simon started the conversation
    July 12, 2014 at 6:23am

    Hi

    I have set the logo so that it displays a bit bigger on mobile but it doesn't then push the header section down accordingly but instead overlaps.

    Is there a way to make the header scale vertically relative to the logo size?

    Many thanks, Si

  •  8,849
    Tahir replied
    July 14, 2014 at 3:02pm

    Hey Simon!

    No i am afraid we dont have such logic in there. You can however tinker with the JS header resize code in "init.js" if you have sufficient knowledge. 

    Thanks

    ThemeNectar Support Team 

  •  21
    Simon replied
    March 30, 2015 at 7:42am

    Has this been resolved by any chance in recent releases? It's quite an issue as logos vary in depth so much that if the mobile header height doesn't adjust accordingly, the design will always run into problems.

  •  1,075
    ThemeNectar replied
    March 31, 2015 at 8:27pm

    Hey SImon - have you referred to this in regards? https://themenectar.ticksy.com/ticket/46745/search/

  •  21
    Simon replied
    April 1, 2015 at 12:47am

    I did see that link.

    The issue I have is that, if you need to include a logo that is a bit deeper it breaks out of the header.

    So you can adjust the logo height but on mobile, the header height doesn't expand accordingly so the logo overlaps.

    That's using the supplied css which works fine (for the logo component).

    A lot of logos are square rather than wide so it's quite a common problem I find as they end up tiny on mobile.

    The screen attached to the top of the thread is one example.

    I wasn't sure how to edit the init.js


  •  8,849
    Tahir replied
    April 1, 2015 at 3:07pm

    Hey,

    You can edit the init.js using this plugin : https://wordpress.org/plugins/solid-code-theme-editor/ .

    Thanks

    ThemeNectar Support Team 

  •  21
    Simon replied
    April 2, 2015 at 1:53am

    Cool.

    I'm really sorry to bug, but what change would I need to make as it's not that easy without knowing my way round this file.

    Just so we are on the same page, the issue is when the logo goes quite big, the header doesn't expand with it. Instead, the logo overlaps so gets very messy.

    Many thanks for your help




  •  8,849
    Tahir replied
    April 2, 2015 at 3:59pm

    Hey Again,

    It wont need js edits .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    @media only screen and (max-width: 1000px) and (min-width: 1px) {
    body header#top #logo img {
        height: 80px!important;
    }
    
    #header-outer {
        height: 117px!important;
    }
    header#top #toggle-nav, header#top #mobile-cart-link {
        top: 35px !important;
    }
}

    Thanks


    ThemeNectar Support Team