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
Regular 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


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
Highlighted
Solution
Regular 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