Jump to content

Navbars hide text at the top of the web page

Ron Brinkman

By Ron Brinkman
in CSS

 Share

Recommended Posts

Ron Brinkman Newbie

Ron Brinkman

Posted
Posted

I implemented W3.CSS Navigation Bars as shown at https://www.w3schools.com/w3css/w3css_navigation.asp, with w3-mobile class.  I found that I had to place a margin-top before the start of the page text in order to keep the first line(s) of text from being hidden behind the navbar.  So far, so good.

When the page is viewed on a small cell phone device, the w3-bars that were initially displayed on a single horizontal line stack on top of each other, the height now much greater than the original margin-top spacing and therefore hiding text at the top of the web page.  The text will not scroll "down", so it cannot be viewed by the user.

There must be a way to get the top of the page text to always start at the bottom of the Navigation Bar so that the margin-top would not need at all (?).

Best Regards,

Ron Brinkman

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I'm guessing you're using the example which uses the w3-top class to attach the menu to the top of the viewport even when scrolling. https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_fixed_top

One solution is to give it sticky positioning using CSS. 

.w3-top {
  position: sticky;
}

 

Link to comment
Share on other sites
Ron Brinkman Newbie

Ron Brinkman

Posted
  • Author
Posted

Yes, I am using the example you mention.

Giving it sticky positioning was successful in getting the page text to start at the bottom of the Navbar rather than starting at the top of the Navbar (and therefore the first couple of lines of the page text hidden behind the Navbar).  However, with this change, surprisingly, the Navbar no longer "sticks".  The Navbar and all the succeeding page text simply scroll off the screen.

Link to comment
Share on other sites
Ron Brinkman Newbie

Ron Brinkman

Posted
  • Author
Posted

The following files, posted at the root of the server, result in the Navbar and the following text scrolling off the top of the screen for me. 

<!-- test.html -->

<!DOCTYPE html>
<html>
<title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://www.w3schools.com/lib/w3.js"></script>

      <style>
	  .w3-top {
	    position: sticky;
	  }
	  </style>

<body class="w3-content" style="max-width:auto">

  <div w3-include-html="/Nav-Test.html"></div>         <!-- Include the appropriate navigation for the page -->
<!--  <div w3-include-html="another-include.html"></div> -->

  <script>
  w3.includeHTML();
  </script>                                                 <!-- End including navigation -->
  
<div class="w3-container">
  <h2>Fixed Top Navigation</h2>
  <h3>The w3-top class forces the navigation bar to stay at the top of the page, even when the user scrolls the page.</h3>
  <h3>Scroll this page to see the effect.</h3>
  <p>Some text to enable scrolling..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>
</body>
</html>

and 

<!-- Nav-Test.html -->

<!-- see https://www.w3schools.com/w3css/w3css_navigation.asp -->
<div class="w3-top" style="max-width:950px">
  <!-- Navigation (Stays on Top) -->
  <div class="w3-bar w3-black">
    <a href="/" class="w3-bar-item w3-button w3-mobile">Home</a>

    <div class="w3-dropdown-hover w3-mobile">
      <button class="w3-button">Menu1 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="/Menu1/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a>
        <a href="/Menu1/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a>
      </div>
    </div>

          <div class="w3-dropdown-hover w3-mobile">
      <button class="w3-button">Menu2 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="/Menu2/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a>
        <a href="/Menu2/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a>
      </div>
    </div>

    <div class="w3-dropdown-hover w3-mobile">
      <button class="w3-button">Menu3 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="/Menu3/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a>
        <a href="/Menu3/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a>
        <a href="/Menu3/Item3/" class="w3-bar-item w3-button w3-mobile">Item3</a>
        <a href="/Menu3/Item4/" class="w3-bar-item w3-button w3-mobile">Item4</a>
        <a href="/Menu3/Item5/" class="w3-bar-item w3-button w3-mobile">Item5</a>
        <a href="/Menu3/Item6/" class="w3-bar-item w3-button w3-mobile">Item6</a>
        <a href="/Menu3/Item7/" class="w3-bar-item w3-button w3-mobile">Item7</a>
        <a href="/Menu3/Item8/" class="w3-bar-item w3-button w3-mobile">Item8</a>
      </div>
    </div>

    <div class="w3-dropdown-hover w3-mobile">
      <button class="w3-button">Menu4 <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="/Menu4/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a>
        <a href="/Menu4/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a>
        <a href="/Menu4/Item3/" class="w3-bar-item w3-button w3-mobile">Item3</a>
        <a href="/Menu4/Item4/" class="w3-bar-item w3-button w3-mobile">Item4</a>
        <a href="/Menu4/Item5/" class="w3-bar-item w3-button w3-mobile">Item5</a>
        <a href="/Menu4/Item6/" class="w3-bar-item w3-button w3-mobile">Item6</a>
        <a href="/Menu4/Item7/" class="w3-bar-item w3-button w3-mobile">Item7</a>
        <a href="/Menu4/Item8/" class="w3-bar-item w3-button w3-mobile">Item8</a>
        <a href="/Menu4/Item9/" class="w3-bar-item w3-button w3-mobile">Item9</a>
        <a href="/Menu4/Item10/" class="w3-bar-item w3-button w3-mobile">Item10</a>
      </div>
    </div>

        <a href="/Menu5/Item1/" class="w3-bar-item w3-button w3-mobile">Menu5</a>
  </div>
</div>

 

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

The include is the one causing the problem.

The element which is sticky needs to be a direct child of the body element. The code will need to look something like this: 

<style>
  .sticky {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
  }
  .w3-top {
    position: static;
  }
</style>

<body class="w3-content" style="max-width:auto">
  <div class="sticky" w3-include-html="/Nav-Test.html"></div>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...