Archived topic
Customise hamburger menu with icon to the right
5 replies · Started by Jason on April 13, 2021
hey everyone,
i'm not even sure if this is possible - without a great deal of work, but my client has asked for it, so i thought i'd get opinions of those with more skills than myself.
so, through the use of css & font awesome/svg i've managed to customise the main navigation as you can see in this screenshot.
on mobile the client would like the navigation to appear like so:
see what they're after here?
can this realistically be done without, a; introducing lots of potential issues across devices/screen sizes, and b; a heap of work
i'm not even sure how to approach this, so any thoughts would be much appreciated.
thanks,
Jason
Hi Jason,
Actually it's not very difficult to achieve :)
So currently the login icon is added as a normal menu item, in this case, we could use a hook element to add the login icon instead.
https://docs.generatepress.com/article/generate_menu_bar_items/
Once it's added as a menu_bar_item we can figure a CSS solution to add the middle line between 2 icons.
Let me know.
hi Ying, that worked a treat thanks :)
a couple of quick, related questions if I may,
1: is it possible to swap the order on mobile, like it is in the original screenshot above?
i'm guessing it is, given its flex box - i am trying to convince the client that's not ideal, but you know clients. if i really have to - can i?
2: i'm trying to do the same thing on another GP site, however, oddly enough the menu_bar_item hook isn't available? what am i missing here?
hi there,
For #1: Do you mean to make it look like this? https://share.getcloudapp.com/NQuwo2EX
If so, try this CSS:
#mobile-header .menu-bar-items {
order: 2;
border: 0;
}
#mobile-header.main-navigation .menu-bar-item.icon > a { border-right: unset; border-left: solid 1px #000000; }For #2: Can you check if the other site is also set to flexbox?
hi Elvin, thanks for the confirmation - thought it'd be as easy as that.
re #2 - yes, that was it, it was still on float - sorry about that.
No problem. Glad you got it sorted. :)
