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

[mdsaqib]

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.

[Anton · Accepted solution]

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: 

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

[Anton · Accepted solution]

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: 

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

[Jsum · Accepted solution]

You can also use :last-of-type

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

[sharonlicari]

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