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.
Make these changes to your menu CSS code.
font-family: 'PT Sans', Arial, sans-serif;
border-bottom: 2px solid #283744;
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.