[Resolved] Changing the location of the off-Canvas panel menu button

[g_younes]

I have off canvas panel enabled for my desktop view. I have set the canvas to slide from the left of the screen (going right).
It makes sense to me that the off-canvas button (the universal three dashes above each other) is placed towards the left of my menus, however by default, it was placed to the right (specifically, to the right of my main navigation menu, next to the ‘search’ icon).

Is there a way by which I can play with the position of the off-canvas menu button? I want it to (ideally) be at the left of my secondary navigation (or primary navigation, to the left of my logo).
From where to start to customize this? I usually have a hard time detecting which id/class go for what in the stylesheet, so if you can tell me what’s the id/class for the off-canvas panel I could start from there (and a css code suggestion would be ideal too).

Thank you, I’ve been asking a lot these days. Great support and great product!

[Tom]

Hi there,

It’s definitely possible. For example, you can hide the standard toggle like this:

.main-navigation .slideout-toggle:not(.custom-slideout-toggle) {
    display: none !important;
}

Then you can add an HTML widget in the Top Bar widget area (Appearance > Widgets). As the HTML, add this:

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

Then you can merge the top bar widget area and your secondary navigation: https://docs.generatepress.com/article/top-bar-widget-area/#secondary-navigation

Hope this helps 🙂

[g_younes]

Hiding the standard toggle worked.
Merging the top bar and the secondary navigation worked.

The only problem is the additional HTML: I added it as I am supposed to (as an HTML widget to the top bar in the widget area), but the menu button didn’t appear. I am not sure what the problem is.

Thank you.

[Leo]

I edited Tom’s CSS above.

Can you give it another shot?

Let me know 🙂

[g_younes]

Hello, it still didn’t work but I found a way to add an icon from font-awesome instead (following GP documentation).

The problem now is I just realized I have to link my added font awesome icon to the off-canvas panel.
I am not sure if you can help me with this.

I marked this topic as resolved by mistake because I thought it was resolved. Here is the long explanation I had when I thought it was resolved it (in case it helps you help me):
___________________________________________________________________________________________________

Hello, it still didn’t work but I found another way to do it. I will write it here in case it helps anyone (well, mainly non-techies like me because this is too detailed):

So the problem was specifically with the HTML above not working. So I decided to get an icon from font awesome and use it.

Adding Fontawesome:

I found out that GeneratePress newer versions do not have font awesome directly included in the theme, so I had to add it. Here is how to that from the documentation:
https://docs.generatepress.com/article/font-awesome/

I tried the second suggestion from the above link (adding JS) because I wanted to use version 5 of font awesome. I usually add JS using a plugin called Code Snippets (suggested by GP developer himself).

It didn’t work at first so I messed around with the code a bit (+ some suggestions from Google) until I got something that worked, which was by adding the following code in the js section of code snippets:

add_action( ‘wp_head’, function () { ?>
<script src=”https://kit.fontawesome.com/cf73556e15.js”></script&gt;
<?php } );

//note: I am not sure this is the *right* way of doing it, but it worked for now.

Using font awesome icon

Now, to add a menu icon, I went to font awesome. Here is the menu icon I wanted: https://fontawesome.com/icons/bars?style=solid
I copied its HTML code from the top of the page:
<i class=”fas fa-bars”></i>
and then added it to the HTML section in my top bar widget (note that we will have an additional problem here that will be solved below).
If you have been following this topic from the beginning, you’ll know that that’s where I wanted to place it, though you can surely add your icon as an HTML widget to any section in your theme (through dashboard -> appearance -> widgets).

Class Problem

After doing all of this, the icon didn’t show, but a small square shaped icon showed instead. Some more googling and it turns out that we have to add a class called ‘fa’ to our HTML above. So the HTML that you have to actually add is this:
<i class=”fa fas fa-bars”></i>

for reference: https://www.hanselman.com/blog/WhyDoMyFontAwesomeIconsShowUpAsBlankSquares.aspx

/*Note that in HTML, we can only define one class attribute, and all the classes should be placed inside it. So the new class ‘fa’ was added alongside the other two classes ‘fas’ and ‘fa-bars’, all separated by a space.*/

Changing the color

So up till now, everything should be working. The icon you placed will take the color of other text placed within the same section. This might work for you, or it might not. If you want to change the color of the icon, add this code to the additional CSS section in the customizer:

.fa-bars {
color: white;
}

//change the .fa-bars class selector to select the icon you are using. You’ll find it in the HTML you used earlier.

[Leo]

Sorry can we take a step back?

Are you saying that Tom’s HTML didn’t work?
<a class="slideout-toggle custom-slideout-toggle" href="#"></a>

It should definitely work. Can you add it back so we can see why it isn’t working?

Let me know 🙂

[g_younes]

Yes, the HTML specifically was the problem. That’s what I said earlier.
I retried the HTML you suggested and again it didn’t work. (Nothing is showing).

I feel like I am overstepping the support limit a bit (you have been really helpful so far, thank you!) so I tried something else. I inspected the element (the original three dashed bar before I hid it), and this is its HTML:

<li class=”slideout-toggle menu-item-align-right”>

So not quite like the one suggested by Tom. Maybe this is all wrong, but I placed the above HTML instead of the one suggested by Tom, and the menu icon finally showed! But with a little problem: it has this little dot next to it:

https://imgur.com/EgLaNUq

Note that I also changed the ‘menu-item-align-right’ class to ‘menu-item-align-left’ and it looks like it did the trick :p

What should I do from here? The only problem I currently have is that little annoying dot.

Thank you!

(if it is better to take it back to Tom’s suggested HTML to see why it wasn’t working, tell me so that I place it back. Thank you again).

[David]

Hi there,

seeing as your current method is working – just add this CSS to remove the bullet:

li.slideout-toggle {
    list-style-type: none;
}

[g_younes]

Worked like a charm.
Thank you all, you’ve been really helpful.

[David]

Glad we could be of help.

[Author]

Posts