Top Navigation Vanishes :-(

HTML & CSS
1

Hi from still wet & dull 14° C York UK :wink:

I cant figure out why the top navigation has vanished on this page:
http://www.english-teacher-david.co.uk/blog/blog.html

but is ok on other pages:
http://www.english-teacher-david.co.uk/method.html

So my question is please…
"Why has the below the below navigation code not rendered on page http://www.english-teacher-david.co.uk/blog/blog.html ?
"

<ul class="rd-navbar-nav">
<li class="active"><a href="./">Home</a></li>
<li><a href="method.html">Method</a></li>
<li><a href="lessons.html">Free Lessons</a>
<!-- RD Navbar Dropdown-->
<ul class="rd-navbar-dropdown">
<li><a href="lessons.html">A1 - Message</a></li>
<li><a href="lessons.html">B1 - Fairies</a></li>
<li><a href="lessons.html">C1 - Interview</a></li>
<li><a href="lessons.html">C1 - Review</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contacts.html">Contact Me</a></li>
</ul>

Any insights welcome :slight_smile:

2

The difference appears to be that method.html’s <nav> element has an additional class - “rd-navbar-static”, which is giving the navbar sufficient changes to be visible.

2 Likes
3

Hey thanks for spotting this, so do you mean i have to remove some code on page http://www.english-teacher-david.co.uk/blog/modal-verbs-restaurant.html for the nav to appear?

4

MMM i just cant see what you can, the nav code looks exactly the same but thank you for taking a look :slight_smile:

5

@m_hutley is correct. Look at this markup from the page that is correct

<nav data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fullwidth" data-md-device-layout="rd-navbar-static" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fullwidth" data-sm-stick-up-offset="0" data-lg-stick-up-offset="150px" class="rd-navbar rd-navbar-static">

Now the broken one:

<nav data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fullwidth" data-md-device-layout="rd-navbar-static" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fullwidth" data-sm-stick-up-offset="0" data-lg-stick-up-offset="150px" class="rd-navbar">

Scroll to the very end of each snippet and compare the classes. That rd-navbar-static class has a display: block which lets it show. It’s set to display: none on .rd-navbar so that rd-navbar-static class is what makes it show on the “correct” page.

3 Likes
6

Thank you, working on this now:-)

7

Thank you so so much it now works @ http://www.english-teacher-david.co.uk/blog/blog.html

8

Thank you, Ive now got it to work :slight_smile:

9

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