Navbar misbehaving

[qim]

Hi

I am having problems with this page http://pintotours.net/XXX/newhtl.html

I used another page as a template, say, http://pintotours.net/Oceania/Australia/OpeningTimesSyd.html

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?

[ronpat]

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.

[qim]

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…

Thanks

[ronpat]

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

EDIT:
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 */
    margin-bottom:1px;
}

newhtl.css (line 208)

#horizontal2 {
    display:none;  /* DELETE ME! at narrow width */
    text-align:center;
}

[qim]

Thank you, ronpat

I think I got it!