[Resolved] Desktop & Mobile Identical menu – GeneratePress

Home Forums Support Desktop & Mobile Identical menu – GeneratePress

Viewing 15 posts - 1 through 15 (of 37 total)
  • Author
    Posts
  • #1196645
    Kir29 LLC

    Hi,

    We are struggling to achieve what we thought it would be possible with Generate Press.

    As part of our web redesign initiative, we would like to replace our current header + sticky menu (www.buzziler.com) replicating this mobile header + sticky menu structure we like from https://theculturetrip.com/

    image.png

    Our brand identity color at Buzziler is yellow (HEX #F8EA23) we need to chance the white background to achieve something similar to this bus using our logo:

    image.png

    We would like to have the same ‘hamburger sticky menu’ (and no header since the logo is part of the menu) for both desktop and mobile,

    We’ve tried multiple combinations (with/without header, playing with the primary menu settings, …. but unfortunately we are not able to achieve such a configuration.

    Could you please advise what is the right configuration to achieve this?

    Thank you for the help

    Team Buzziler

    #1196698
    Leo
    Staff
    Customer Support

    Hi there,

    Can you activate the mobile header option with a mobile header logo uploaded first?
    https://docs.generatepress.com/article/mobile-header/

    Then activate the navigation search as well:
    https://docs.generatepress.com/article/navigation-search/

    Then we should be able to provide the necessary CSS to achieve the layout.

    Let me know 🙂

    #1197125
    Kir29 LLC

    Hi again,

    Let’s forget about the search navigation for now since is not relevant).

    We’ve changed mobile header options (check our staging area http://07y.2f5.myftpupload.com/) but we need help for:

    1) Our logo is displayed very small and we need to at least double the size of it to be visible.
    2) Our background color should be yellow (HEX #F8EA23) although the color scheme for the menu is correct (black/gray
    3) Our new mobile header should also be used for desktops/tablets (instead of only mobile)

    Could you please advise?

    Thank you

    #1197439
    David
    Staff
    Customer Support

    Hi there,

    1. Customizer > Layout > Primary Navigation – Increase the Menu Item Height. This will increase height of the mobile header and the logo.

    2. Customizer > Colors > Primary Navigation – the mobile header uses these colors.

    3. Customizer > Layout > Primary Navigation – Mobile Menu Breakpoint – manually type in a very large number eg. 4000. Now Mobile will be used across all device sizes.

    #1197612
    Kir29 LLC

    Hi again

    Thanks for the reply. 1) & 3) look perfect now however for 2) we have a problem since our background color for the header should be yellow (HEX #F8EA23) but not for the menu color scheme (see http://07y.2f5.myftpupload.com/)

    Out design team doesn’t allow us to have yellow also in the menu color schema. The correct menu schema selected is white.

    Could you please advise how can we remove the yellow from the menu?

    Thank you

    #1197808
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Are you needing to change the color of the off canvas menu? If so, check out Customize > Colors > Off Canvas Panel.

    Let me know 🙂

    #1198142
    Kir29 LLC

    Hi again.

    That worked!

    We are now considering to activate the navigation search as well following your instructions (https://docs.generatepress.com/article/navigation-search/) but we would need to change the location of the items.

    Could you please advise how we can change the logo alignment to central, the menu alignment to the left and the search navigation aligned to the right?

    Thank you for the support

    #1198252
    David
    Staff
    Customer Support

    We can help with the CSS layout – however probably best we pin down the design you’re trying to achieve.

    e.g

    3) Our new mobile header should also be used for desktops/tablets (instead of only mobile)

    please advise do you still require the Mobile nav to be used across all devices ?

    If so can you re-enable the mobile header.
    Action the steps outlined here

    And then enable the navigation search.

    I can then provide the CSS to create that layout.

    #1200417
    Kir29 LLC

    Hi again,

    With regards to your question ‘please advise do you still require the Mobile nav to be used across all devices?’ yes, we are happy with the current mobile design and we would like to have the same for for mobile/tablet/desktop.

    A couple of questions:

    1) Search Navigation has been enabled now for our staging site (http://07y.2f5.myftpupload.com/) but as you can see is not shorted in the way we required (menu on the left, logo in the center, search on the right).

    2) e have also noticed the 3 items (menu / logo/ search) are displayed in multiple lines in a mobile device which would not follow the requirements from our UX team.

    Could you please advise for 1) and 2)?

    Thank you

    #1200436
    David
    Staff
    Customer Support

    Ok add this CSS to arrange the Menu / Logo / Search:

    .site-logo.mobile-header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .main-navigation.has-branding .menu-toggle {
        order: -1 !important;
        margin-right: auto;
    }

    You can also use this CSS to adjust the width of the navigation search if required:

    .navigation-search.nav-search-active {
        left: unset;
        max-width: 300px;
    }
    #1200766
    Kir29 LLC

    Hi again,

    Could you please specify where/how to specifically add both pieces of CSS?

    Thanks

    #1200767
    David
    Staff
    Customer Support
    #1200787
    Kir29 LLC

    Hi again

    Using your Additional CSS option in your recommendation (https://docs.generatepress.com/article/adding-css/#additional-css) we’ve added the following code:

    /* Buzziler Site CSS */ /* ===============================
    CSS to for GeneratePress
    =============================== */

    /* Arrange Menu (left) / Logo (center) / Search (right) */
    .site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    }

    .main-navigation.has-branding .menu-toggle {
    order: -1;
    margin-right: auto;
    }

    /* Adjust the width of the navigation search */
    .navigation-search.nav-search-active {
    left: unset;
    max-width: 300px;
    }

    It looks good now (Staging site: http://07y.2f5.myftpupload.com/) but as soon as you scroll down in desktop/tablet/mobile the items lose their position.

    Could you please advise?

    Thank you

    #1200791
    David
    Staff
    Customer Support
    #1200817
    Kir29 LLC

    Hi again,

    Seems to work in most browsers but we’ve noticed a strange effect with the scroll bar in Chrome + iPhone (both when portrait and landscape mode).

    Could you please check the scroll bar when scrolling down / up in Chrome + iPhone?

    Thanks

Viewing 15 posts - 1 through 15 (of 37 total)
  • You must be logged in to reply to this topic.