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

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.

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?

For sure - just reply to this topic when you're ready.

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?

No problems.
Just to clarify the layout is it:

1. Hamburger | Logo | Navigation

or

2. Logo | Hamburger | Navigation

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

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 :)

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

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;
}

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

Glad we could be of help