topic Re: How to place a button in the mobile menu navigation bar (Inside Hamburger menu) in CMS Development

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

mdsaqib — Fri, 17 Jul 2020 13:43:28 GMT

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.

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

sharonlicari — Mon, 27 Jul 2020 08:22:24 GMT

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

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

Anton — Mon, 27 Jul 2020 11:17:25 GMT

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

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

Jsum — Mon, 27 Jul 2020 16:37:04 GMT

You can also use :last-of-type

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