How to place a button in the mobile menu navigation bar (Inside Hamburger menu)

Developer Support CMS Development
, ,
1

Hello,
I’ve been designing a page, and according to the wireframe, I’m supposed to put a button in the navigation menu on top to make it responsive, I’m currently using the nth-child css property, to making the 6th <li> as a button, any assistance in the following would be great. Here’s the LINK to the site. Please guide me with the steps for mobile responsiveness.

2

Hey @mdsaqib

Thank you for the information provided. I’ll tag a few experts.

Hey @Jsum @Anonymous @FabianRichter what would you advise @mdsaqib?

Thanks

Sharon

3

Hi @mdsaqib,

I’ve looked at your preview link - it looks fine for me (Chrome).
What exactly do you want to change?

If you want to get rid of the :nth-child property you can wrap the navigation link (Settings->Website->Navigation) inside a span with a custom class. Something like this:

29649iE836236E21081406.png

Or do you want the button on the left beside the burger menu?
If so - the easiest way would be to put it in the navigation with a “display:none” which should be above the view-size of the burger menu.
Something like this:

{# show the custom button if the mobile menu is visible/active #}
@media screen and (max-width:767px){
.button{
display:block;}
}

{# don't show the custom button if the mobile menu is'n visible/active #}
@media screen and (min-width:768px ){
.button{
display:none;}
}

regards,

Anton

4

You can also use :last-of-type

ul li:last-of-type a {
 /* css attributes */
}