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 3 years, 8 months ago by David.
-
AuthorPosts
-
June 25, 2020 at 11:57 pm #1342241moy
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 #1342276DavidStaffCustomer 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.June 26, 2020 at 4:18 pm #1343154moyI 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 #1343339DavidStaffCustomer SupportFor sure – just reply to this topic when you’re ready.
July 2, 2020 at 8:33 pm #1350079moysorry 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 #1350407DavidStaffCustomer SupportNo problems.
Just to clarify the layout is it:1. Hamburger | Logo | Navigation
or
2. Logo | Hamburger | Navigation
July 3, 2020 at 7:49 am #1350704moysure, 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 #1351057TomLead 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 🙂
July 3, 2020 at 8:25 pm #1351223moysorry 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 #1351749DavidStaffCustomer 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; }
July 4, 2020 at 9:11 am #1351841moythank 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 #1351847DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.