Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Paula Mourad
Paula Mourad
5,154 Points

Make a Nav Menu change in different devices

Hey guys,

In my footer, I have a horizontal navigation menu. Very simple. I need the text in that nav menu to change at a 380px media screen. For now, I've used the "visibility" property in CSS, but I believe this is not the best way to go. Any thoughts? Thanks!

2 Answers

Bradley Fowler
Bradley Fowler
9,701 Points

Hi Paula,

Apologies for the delayed response.

You can add a media query like below. This block of code within the @media screen and (min-width: 380px) will only execute above 380px.

.back-to-top-button {
  display: block;
}

.nav-menu {
  display: none;
}

@media screen and (min-width: 380px) {
  .nav-menu {
    display: block;
  }

  .back-to-top-button {
    display: none;
  }
}

Going for the mobile first approach, on mobile devices or below 380px the .back-to-top-button element will display whilst the .nav-menu will not.

Above 380px the .back-to-top-button will not display and the .nav-menu will display.

Hope this helps.

Thanks, Bradley

Bradley Fowler
Bradley Fowler
9,701 Points
Bradley Fowler
Bradley Fowler
9,701 Points

Hi Paula,

How do you want the text to display when it reaches 380px?

Also is this below 380px or above?

Thanks, Bradley

Paula Mourad
Paula Mourad
5,154 Points

Hey Bradley, Thanks for replying! The text needs to change when it gets to 380px or less. In desktop view, the menu has three items "About, contact and portfolio". When it reaches 380px or less; it must say only "Back to top".

Thanks in advance!