CMS Development

mdsaqib
Member | Partner
Member | Partner

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

SOLVE

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
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

Anton Bujanowski Signature

View solution in original post

Jsum
Solution
Key Advisor

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

SOLVE

You can also use :last-of-type

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

View solution in original post

3 Replies 3
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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

Anton Bujanowski Signature
Jsum
Solution
Key Advisor

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

SOLVE

You can also use :last-of-type

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

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

SOLVE

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


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