Hamburger Menu Horizontal Links

HTML & CSS
1

Hello friends at Sitepoint. I want help or advice on having a horizontal menu on a smaller screen size. As I was making a website with a responsive nav menu, I said it would be neat if the link could come out horizontally because the space is there. I tried a few things and could not get it to happen. Any help or suggestions are greatly appreciated. I have included a photo that I had in mind. Thanks –Phil

explain
explain432×325 8.24 KB

2

Hi,

You have a lot of conflicting styles and a lot of duplicated code that makes this twice as hard as it needs to be. I’ll need to revisit this later when I have more time but as a start you can these styles to the end of your small screen media query to see if it gets you close to what you were looking for :slight_smile:

  .topnav.responsive .dropdown,
  .topnav.responsive .dropdown-content {
    display: flex !important;
    position: static;
    width: auto;
  }
  .topnav.responsive .dropdown .dropbtn {
    width: auto;
  }
  .logobar,.nav{
    max-width:100%;
  }
3

Ok here’s a quick tidy up with my code inserted in the right place to start with.

Note that on small screen there’s only room for about 3 links in the dropdown so you will need to think about that.

You have duplicated a lot of rules unnecessarily and had long convoluted selectors when none were needed. The media query only needs the differences and not the whole lot again. keep things simple and concise.

I removed some of your search code as that wasn’t present in the demo so you will need to add that back in.

4

Stupendous! I have got a lot of work/study to do. You made that look too easy. I sat here for hours. The reason for so much duplicate code is because I had merged two CSS files into one. We were keeping the navigation.css separate from the main.css. However, this is super helpful. Thank You!

1 Like