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

SOLVE
Highlighted
New Member

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.

0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Solution
Advisor | Diamond Partner

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: 
Bildschirmfoto 2020-07-27 um 13.08.43.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








check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

Highlighted
Solution
Esteemed Advisor | Partner

You can also use :last-of-type

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

View solution in original post

3 Replies 3
Highlighted
Community Manager

Hey @mdsaqib     

 

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

 

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

 

Thanks 

Sharon



¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


Highlighted
Solution
Advisor | Diamond Partner

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: 
Bildschirmfoto 2020-07-27 um 13.08.43.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








check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

Highlighted
Solution
Esteemed Advisor | Partner

You can also use :last-of-type

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

View solution in original post