Navbar misbehaving


I am having problems with this page

I used another page as a template, say,

and have been adjusting the code to accept the new content in the middle section (the sidebars are not important as they will be changed drastically).

I cannot understand why the navbar (small-nav and small-nav2) has a different behaviour when the screen is narrowed to emulate small devices.

I have compared the appropriate code in the OpeningTimesSyd.html to the one in the new page and cannot see any differences.

Could you help. please?

If the HTML is the same, then the CSS must be different

The CSS on the new page has a rule for an unordered list that is being picked up by the nav menu. The other “good” page does not have this CSS.

newhtl.css (line 741)

ul {    
    background-color: #f7ffff;    
    border: 1px solid #999;    
    list-style-type: none;    
    padding: 10px 5px 10px 0;    
    width: 170px;

Although the width declaration is the culprit, I recommend assigning the ul more specifically so it does not affect the nav menu at all.

Many thanks ronpat

I got a bit further but am at a loss as to why at MQ 550 the navbar does not stretch all the way.

if you have time…


Why is the “same” code so different on these pages?

Look for differences between the code on the pages.

These are the rules/properties that are affecting the difference. However, making these changes will break the wider widths. Do you know how to write rules for your media queries?

newhtl.css (line1299)

#horizontal2 {
    display:inline-block;  /* DELETE ME! at narrow width */

newhtl.css (line 208)

#horizontal2 {
    display:none;  /* DELETE ME! at narrow width */

Thank you, ronpat

I think I got it!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.