Home › Forums › Support › use off canvas panel hamburger option in the left-hand side of my webite page
- This topic has 11 replies, 3 voices, and was last updated 6 months, 2 weeks ago by
David.
-
AuthorPosts
-
June 25, 2020 at 11:57 pm #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?
June 26, 2020 at 12:33 am #1342276David
StaffCustomer SupportHi 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/June 26, 2020 at 4:18 pm #1343154moy
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?
June 27, 2020 at 12:33 am #1343339David
StaffCustomer SupportFor sure – just reply to this topic when you’re ready.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 2, 2020 at 8:33 pm #1350079moy
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?July 3, 2020 at 4:56 am #1350407David
StaffCustomer SupportNo 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/July 3, 2020 at 7:49 am #1350704moy
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 optionmobile view –
hamburger | logo ( in the middle of the navigation bar ) | search option
July 3, 2020 at 2:28 pm #1351057Tom
Lead DeveloperLead DeveloperHi 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-developmentJuly 3, 2020 at 8:25 pm #1351223moy
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
July 4, 2020 at 8:05 am #1351749David
StaffCustomer SupportTry 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/July 4, 2020 at 9:11 am #1351841moy
thank you very much mr.Tom & mr.David for helping me out. it works just as I wanted it. your team is awesome
July 4, 2020 at 9:16 am #1351847David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.