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

[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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

No problems.
Just to clarify the layout is it:

1. Hamburger | Logo | Navigation

or

2. Logo | Hamburger | Navigation

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[moy]

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

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts