2 Replies Latest reply on Jul 31, 2014 12:42 PM by chome4

    Responsive Menu Issues




      I'm using a friend's laptop with Dreamweaver CC and have been given the task of making a site.


      I'm currently working on the menu and have pasted a responsive menu into the code:




      On the computer, when I shrink the browser using ctrl+shif+m in Firefox, it shrinks and the sliding down of the menu. All OK so far.


      When I added extra items to the menu, making it much wider, it still looked OK when minimised but when I returned to normal desktop mode, some of the menu contents were pushed down outside of the navbar. I saw that the 'ul' class was 'clearfix', so I temporarily added an inline style="width:100%" in the HTML file so the entire width of the 'gridContainer' could be used. This didn't solve the problem of the full-screen version 'remembering' its new navbar width.


      The menu was taken from honkiat.com.


      In choosing 'Responsive Grid' design, boilerplate.css comes into play. I have had to comment out a couple of lines in this css as they changed the font colour of the menu items. That's where I started getting frustrated as my coding/development skills are very limited.


      I've attached a link to the files.




      Can someone take a look to see where I am going wrong?


      Thanks in advance.

        • 1. Re: Responsive Menu Issues
          Nancy OShea Adobe Community Professional & MVP

          Make these changes to your menu CSS code.


          nav {

              width: 100%;

              background: #455868;

              font-size: 14px;

              font-family: 'PT Sans', Arial, sans-serif;

              font-weight: bold;

              border-bottom: 2px solid #283744;




          Nancy O.

          • 2. Re: Responsive Menu Issues
            chome4 Level 1

            Looks perfect! Thank you. On the desktop, it returns showing the navbar contents on two levels, a screen refresh puts everything back in their place, but as no one's going to view a site in smartphone mode then desktop mode outside of developement, this is perfect.


            Thanks again.