[Resolved] use off canvas panel hamburger option in the left-hand side of my webite page

Home Forums Support [Resolved] use off canvas panel hamburger option in the left-hand side of my webite page

Home Forums Support use off canvas panel hamburger option in the left-hand side of my webite page

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1342241
    moy

    I like to use the off-canvas panel hamburger option on the left side of my website landing page, but the option is showing on the “right side in the desktop view” and “left side in the mobile view”. Is there a way I can shift the hamburger option in the left-hand side on the desktop, just like its showing in mobile view?

    #1342276
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so i can work out the correct CSS?
    You can edit your original topic and use the Site URL field to share the link privately.

    #1343154
    moy

    I haven’t launched the website yet, right now I am customizing my site, I just brought the domain from Bluehost. I’ll launch the website on 30th June so is it okay if I send you on 30?

    #1343339
    David
    Staff
    Customer Support

    For sure – just reply to this topic when you’re ready.

    #1350079
    moy

    sorry for the late reply, as I am a newbie, it took me a while understand the setup & launch the website.
    I want to edit the hamburger option. it is showing on the right side of the navigation panel, I wanted it on the left side of the primary navigation bar (in both mobile and desktop). is it possible?

    #1350407
    David
    Staff
    Customer Support

    No problems.
    Just to clarify the layout is it:

    1. Hamburger | Logo | Navigation

    or

    2. Logo | Hamburger | Navigation

    #1350704
    moy

    sure, let me describe the layout properly –

    desktop view –

    on the LEFT SIDE of navigation bar – Hamburger | Logo
    on the RIGHT SIDE of the navigation bar – Navigation | search option

    mobile view –

    hamburger | logo ( in the middle of the navigation bar ) | search option

    #1351057
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You could try something like:

    1. Hide the current toggle:

    li.slideout-toggle {
        display: none !important;
    }

    2. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/

    Give it this content:

    <span class="slideout-toggle"><a href="#"></a></span>

    Set the hook to generate_inside_navigation and set the Display Rules.

    Then add this CSS:

    span.slideout-toggle {
        order: -1;
    }

    Let me know if that does it or not 🙂

    #1351223
    moy

    sorry for not describing it properly,

    1 ) It is working properly on desktop only, BUT THE OPTION IS NOT VISIBLE ENOUGH to the visitors. It is NOT SHOWING IN THE MOBILE VERSION… I like to have it on both desktop and mobile.

    2 ) Hamburger is showing link colour settings and it’s STICKING in the corner of the screen so it’s NOT looking good, I DONT THINK VISITORS ARE GOING TO NOTICE IT RIGHT AWAY.

    “” SO is it possible to make it MORE VISIBLE just like BLOD GENERATEPRESS HAMBURGER OPTION WITH TOGGLE LABEL but with PADDING on both sides WITH CURRENT NAVIGATION COLOUR? “”

    3 ) As long as it is BOLD AND VISIBLE with a bit of padding on the BOTH side and with CURRENT navigation colour. I am okay…. ( BOLD generatepress hamburger option with a toggle label WITH PADDING ON BOTH SIDES is preferable)

    IS IT POSSIBLE?

    THANK YOU FOR YOUR SUPPORTIVE ASSISTANCE

    #1351749
    David
    Staff
    Customer Support

    Try this CSS instead:

    span.slideout-toggle {
        order: -1;
        margin-left: 40px;
    }
    span.slideout-toggle a:after {
        content: 'MENU';
        margin-left: 10px;
    }
    span.slideout-toggle a {
        color: #ff4e00;
    }
    span.slideout-toggle a:hover {
        color: #000;
    }
    #mobile-header .menu-toggle {
        order: -1;
        margin-right: auto;
    }
    #mobile-header .navigation-branding {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    #1351841
    moy

    thank you very much mr.Tom & mr.David for helping me out. it works just as I wanted it. your team is awesome

    #1351847
    David
    Staff
    Customer Support

    Glad we could be of help

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