0

Why does my top navbar on this page wrap before and after the "Landscaping" menu option?

I'm taking W3.CSS out for a test drive and am finding it a fairly satisfactory experience so far. I've produced a skeleton website rather quickly and find it clearer and more concise than I'm used to getting when I don't use W3.CSS.

The skeleton is working reasonably well aside from the strange split around the Landscaping option.

I can't see anything in my code that would seem likely to cause these breaks. Or maybe I should say my debugging skills with Devtools are not quite sufficient. How can I track this problem down?

halfer
  • 19,824
  • 17
  • 99
  • 186
Henry
  • 1,395
  • 1
  • 12
  • 31
  • This question could do with an [mcve] - if you have a copy of the code as it was in 2019, do please add it to the question. There was a demo link, but it seemed to be dead, so I've removed it. – halfer Mar 31 '23 at 10:11

2 Answers2

0

.w3-block {
        display: inline-block !important;
        width: auto !important;
    }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aux02 - About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="javascript/all.js"></script> 
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar w3-white w3-card" id="myNavbar">
    <a href="#home" class="w3-bar-item w3-button w3-wide">Auxsable</a>
    <!-- Right-sided navbar links -->
    <div class="w3-right w3-hide-small">
      <a href="choice07.php" class="w3-bar-item w3-button"><i class="fa fa-home"></i> HOME</a>
      <a href="contact_W3.php" class="w3-bar-item w3-button"><i class="fa fa-mobile-alt"></i> CONTACT US</a>

       <a onclick="myAccFuncTop()" href="javascript:void(0)" class="w3-button w3-block w3-white" id="myBtn">
      <i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i></a>
      <div id="demoAccTop" class="w3-bar-block w3-hide w3-padding-large w3-medium">
       <a href="landscape_design_W3.php" class="w3-bar-item w3-button"><i class="fas fa-drafting-compass"></i> Design</a>
       <a href="landscape_installation_W3.php" class="w3-bar-item w3-button"><i class="fas fa-seedling"></i> Installation</a>
       <a href="landscape_maintenance_W3.php" class="w3-bar-item w3-button"><i class="fas fa-hammer"></i> Maintenance</a>
       <a href="plants_W3.php" class="w3-bar-item w3-button"><i class="fas fa-leaf"></i> Plants</a>
      </div> 
      
      <a href="forestry_W3.php" class="w3-bar-item w3-button"><i class="fas fa-tree"></i> FORESTRY</a>
      <a href="about_W3.php" class="w3-bar-item w3-button"><i class="fa fa-user"></i> ABOUT US</a>
    </div>
    <!-- Hide right-floated links on small screens and replace them with a menu icon -->

    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div><!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close <i class="fas fa-times-circle"></i></a>
  <a href="choice07.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-home"></i> Home</a>
  <a href="contact_W3.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-mobile-alt"></i> Contact Us</a>
<!--   <a href="#" onclick="w3_close()" class="w3-bar-item w3-button">Landscaping</a>  -->
      <a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-white w3-left-align" id="myBtn">
      <i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i>
    </a>
    <div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
      <a href="landscape_design_W3.php" class="w3-bar-item w3-button"><i class="fas fa-drafting-compass"></i> Design</a>
      <a href="landscape_installation_W3.php" class="w3-bar-item w3-button"><i class="fas fa-seedling"></i> Installation</a>
      <a href="landscape_maintenance_W3.php" class="w3-bar-item w3-button"><i class="fas fa-hammer"></i> Maintenance</a>
      <a href="plants_W3.php" class="w3-bar-item w3-button"><i class="fas fa-leaf"></i> Plants</a>
    </div>
 
  <a href="forestry_W3.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fas fa-tree"></i> Forestry</a>
  <a href="about_W3.php" onclick="w3_close()" class="w3-bar-item w3-button"><i class="fa fa-user"></i> About Us</a>
</nav>

<div class="w3-auto">

<div class="w3-container w3-padding">
<br><br><br>
<h1>About Us</h1>      
<p>J<del>xxxxxx</del> S<del>xxxxxxx</del> is a Registered Professional Forester and graduate of the 
Honours Bachelor of Science in Forestry program at Lakehead University in Thunder Bay.</p>
<p>J<del>xxxxxx</del> has extensive experience in silviculture and site rehabilitation. Along with 
landowners, J<del>xxxxxx</del> writes woodlot management plans and tree marking prescriptions that 
focus on each customer's needs and desires for their woodland area.</p>
<p>Combining her skills of forest management and silviculture, she adds a little flair and generates 
unique and beautiful native plant landscape designs for the Carolinian Forest Region.</p>
</div>

<div class="w3-container w3-padding">
  <div class="w3-panel w3-light-grey w3-large">
    <p class="w3-medium w3-serif">
    <i>Serving Lambton, Huron, Middlesex and Essex Counties</i></p>
  </div>
</div>
</div><!-- w3-auto -->

<!-- Footer -->
<footer class="w3-center w3-blue-grey w3-padding">
  <p><i class="far fa-copyright"></i> 2019</p>
</footer>
</body>
</html>

You can change two class like this

/* if you dont want to float right */
.w3-right {
    /* float: right!important; */ 
}

.w3-block {
    display: inline-block;
    /* width: 100%; */
}

enter image description here

If you want to keep float right, only change css .w3-block to

.w3-block {
    display: inline-block;
    /* width: 100%; */
}

enter image description here

Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
  • Unfortunately, your solution doesn't work for me. I *did* get the Landscaping option back in line with the other menu options by removing w3-block entirely from the class list for the Landscaping option. Unfortunately, it put Landscaping at the end of the list instead of in the middle where I wanted it and when I clicked on it, the Forestry and About Us options were *below* the Landscaping dropdown. That's not going to be satisfactory. Thanks for trying though! – Henry Mar 19 '19 at 17:05
0

enter image description here

Above is the screen shot of the html structure of your menu. You could use ul and li for the same menu and the sub menu items as well. I do not know much about W3.css but your css has too many "!important", which is not at all recommended. Instead I would suggest you to re-work the structure, as the current one will not support the RWD.

<style>
    .menu{
        display:block;
        text-decoration:none;
        list-style:none;
        /* width as per requirement; & other styling */
    }
    .menu > li{
        position:relative; /* important to maintain the sub-menu item as local. */ 
        display:inline-block;
        /* width if needed */

    }
    .menu li a {
         display:block;
         width:100%;
         /*padding as per the need*/
    }
    .menu .subMenu{
        display:none;
        position:absolute;
        /* top as per the height of the .menu line-height or height */
        left:0;
        /* width: 100% or in em's */
    }
    .menu > li:hover .subMenu{
        display:block;            
    }
    .menu .subMenu li{
        display:block;
        width:100%;
    }
</style>
  <ul class="menu">
    <li><a href="#"><span class="homeIcon"></span><span>Home</span></a></li>
    <li><a href="#"><span class="contactusIcon"></span><span>Contact us</span></a></li>
    <li><a href="#"><span class="forestryIcon"></span><span>forestry</span></a></li>
    <li><a href="#"><span class="aboutusIcon"></span><span>About us</span></a></li>
    <li>
        <a href="#"><span class="landscapingIcon"></span><span>Landscaping</span></a>
        <ul class="subMenu">
            <li class="subMenuItem"><a href="#"item one</a></li>
            <li class="subMenuItem"><a href="#"item two</a></li>
            <li class="subMenuItem"><a href="#"item three</a></li>
        </ul>
    </li>
 </ul>
vssadineni
  • 454
  • 4
  • 11
  • I can't change the W3.CSS classes but I can override them after the fact, as Hien Nguyen recognized in his solution so I was hoping you'd help me figure out what overrides I needed. The code you've given seems to be an entirely different way of doing what I want and may well be valid - I will look at it - but doesn't use the W3.CSS classes. Thanks for taking the time to suggest your solution. – Henry Mar 19 '19 at 17:11