XF 2.0 Can I add a menu item in the navbar in mobile view only?

[Cannabis Ape]

Would like to know how can I can get a home link in the nav bar in mobile view like so?

My logo is above the nav bar so got plenty of room.

 

[Joshb_]

Is the picture what you want, or what you have?

 

[Cannabis Ape]

Is the picture what you want, or what you have?

What I want.

 

[Joshb_]

Use @media only screen

<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>

Show content on mobile devices.

.mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
      .mobileShow {display: inline;}
  }

Hide content on mobile devices.

  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }

Example used from: Schmidt, Lynelle. “How to Display Site Content Only Your Mobile Viewers Can See.” HubSpot Blog, blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht.

 

[Cannabis Ape]

In which HTML file and don't it need the link I want to send it to?

I assume the CSS goes in extra.less?

 

[Joshb_]

Probably PAGE_CONTAINER where the main HTML is stored for display. I would put the CSS in the app_header.less

 

[Cannabis Ape]

Probably PAGE_CONTAINER where the main HTML is stored for display. I would put the CSS in the app_header.less

K cool, will try it tomorrow. Been up again for way too many hours.

Cheers

 

[Joshb_]

No problem. Good Night!

 

[Cannabis Ape]

Use @media only screen

<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>

Show content on mobile devices.

.mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
      .mobileShow {display: inline;}
  }

Hide content on mobile devices.

  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }

Example used from: Schmidt, Lynelle. “How to Display Site Content Only Your Mobile Viewers Can See.” HubSpot Blog, blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht.

Sorta worked but need to place it in the right spot I think as it's in a separate bar above everything else and not linked.

Edit: Aight, got it on the right spot now I just need to get it spaced right and have it linked to something, gonna experiment.

Edit 2: Ok so I got it placed where I want and got it linked but i can't figure out how to set the padding. It needs to go up a bit.

Edit 3: Woot, figured it out, love this experimenting and learning. Now to the figure out how to move the burger menu a bit more to the right

Thanks for the guidance man, the community need more people like you.

 

[Joshb_]

No problem!