[Resolved] Mobile menu

Home Forums Support [Resolved] Mobile menu

Home Forums Support Mobile menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #629328
    Engelbrecht

    Hi,

    Could you help me achive this websites navigation menu (www.ing.dk viewed from iPhone) with hamburger on left, search icon left of main
    Menu and secondary menu on Right side with another icon (user icon)?
    I havent Been lucky to find any relevant posts about it yet since Font awesome is taken off GP and i actually dont want the whole libarary to be loaded because of performance issues.

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #629421
    Leo
    Staff
    Customer Support

    Hi there,

    First follow this page here to center the mobile header logo:
    https://docs.generatepress.com/article/centering-logo-mobile-header/

    As for only loading a few icons, see Tom’s suggestion here:
    https://generatepress.com/forums/topic/adding-call-button-to-mobile-header/#post-550004

    Once all the elements are in we can help with some CSS to arrange them ๐Ÿ™‚

    #630930
    Engelbrecht

    Thanks Leo,

    Im actually finding it quite difficult to get to work properly with the logos.
    my site: http://www.bryllupskuller.dk.

    When on desktop, i want one version of a logo for the frontpage because ive got transparent navigation (logo thats white) and when navigating to other pages, my navigation background is white, so the logo has to change to black or darker font.

    Same goes for Mobile, but im not sure i can fit the text from the logo in, so i may be creating another logo (white and black ones) that just says BK.

    Then there is the alignment. Right now the logo is all to the left, but i want the navigation to be center AND the logo be left of the navigation (not all the way to the left).

    It should look more or less like this: https://www.hitched.co.uk/

    #631149
    Leo
    Staff
    Customer Support

    The page header add-on allows you upload a different logo for that page header:
    https://docs.generatepress.com/article/page-header-logo/

    The next version (which is in already in release candidate) will allow you to upload a different mobile header logo as well.
    It would make things a lot easier. Would you consider it?
    https://docs.generatepress.com/article/beta-testing/

    The official release shouldn’t be too long either if you can hold off for a little bit.

    #631802
    Engelbrecht

    I’ve just tested the beta version. I realised that page headers were moved under Elements menu now.
    However, im not sure how to get the transparent background back as you can see on http://www.bryllupskuller.dk. CSS or have i overlooked something?

    Also, as you can see, ive styled a button but i realised that it depends on the navigation hight, so to avoid having a way to high button i needed to reduce hight. that leads me into problems with the logo and sticky navigation, since i cannot fit logo into navigation because of hight now and when scorlling, the nav is way to small. Im not sure how to do it with css, since it logo needs to be left aligned, center-left of navigation and when on mobile, everything changes. Mobile -> hambuger menu and search icon left, center logo and user menu (secondary navigation) right.

    Regarding of changing logo based on page header element should now be fairly simple because i can target the right page or pages and exclude the frontpage! Thats nice!

    #631986
    Leo
    Staff
    Customer Support

    You will need to use the page hero merge option, like this:
    https://docs.generatepress.com/article/merging-header-navigation-content/

    As for the nav button, try adding this line to your existing CSS:
    line-height: 30px;

    #632293
    Engelbrecht

    Thank you Leo,
    It did work with the hero image now.

    Another question, i want to add this shadow on the main nav, but not when on the frontpage with transparent header. Also i want it when using sticky header. How is that possible? Right now you can see a small faded line on the frontpage. Its perfect when scrolling and on all the other pages.

    Css:
    .main-navigation {
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    }

    Regarding the logo, i need to develop a new one. Going to try with a test logo the next couple of days.

    #632544
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic for the new question?

    So I can mark this one as resolved ๐Ÿ™‚

    Thanks!

    #632753
    Engelbrecht

    Oh, sure! Ive actually figured out a solution so need to worry about it. I will get back to you when i got time to play with the logos.

    #632796
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.