CODEWITHSUNDEEP
htmlcssmenunavigationwidth
user8024705
user8024705

Reputation:

Making navigation menu autiomatically scale to browsers width in html and css

I am attempting to make a navigation bar that automatically fills the width of the screen of any computer judging by the width of the open browser window. When the person rescales their browser, I want my navigation bar to rescale itself accordingly. I have three menu buttons that make up my navigation bar. I feel like a value should be 33.334% or something, but I've been fiddling with it for an hour, and I can't manage to get it working.

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
    display: table;
    width: 1436px;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    list-style-type: none;
    display: table-cell;
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #008000;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: 'TopSecret';
    src: url('TopSecret.ttf');
         url('TopSecret.ttf') format('truetype');
    text-decoration: none;
    height: 30px;
    width: 476px;
    display: block;
    color: #FFF;
    border: 1px solid #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}

#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu li:hover {
    background: #329932;
}   

#navMenu ul li:hover ul li a:hover {
    background: #329932;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}
<body>
    <div style="margin: 0 auto;">
        <div id="navMenu">
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="#">Gallery</a>
                    <ul>
                        <li><a href="#>2018</a></li>
                        <li><a href="#">2017</a></li>
                        <li><a href="#">2016</a></li>
                        <li><a href="#">2015</a></li>
                    </ul>
                </li>
                <li><a href="tankreviews.html">Shop</a>
                </li>
            </ul>
            <br class="clearFloat">
        </div>
    </div>
</body>

Upvotes: 0

Views: 1492

Answers (4)

LouiseW
LouiseW

Reputation: 53

Give your NavMenu a relative size i.e 100% (you can also use max-width if you don't want it to get bigger than a certain size) and put the 33% in #navMenu li instead of in #navMenu ul li a (do NOT have any width set in this of it will mess up!).

I would also add another class to the Gallery drop-down links so you can style them separately with a width of 100% or fixed size if you want.

This is what it will look like:

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
    display: table;
    max-width: 1436px;
width: 100%;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    list-style-type: none;
    display: table-cell;
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #008000;
    width: 33%;
}

#navMenu ul.drop li {
    width: 100%;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: 'TopSecret';
    src: url('TopSecret.ttf');
         url('TopSecret.ttf') format('truetype');
    text-decoration: none;
    height: 30px;
    display: block;
    color: #FFF;
    border: 1px solid #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}

#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu li:hover {
    background: #329932;
}   

#navMenu ul li:hover ul li a:hover {
    background: #329932;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}

Upvotes: 0

vishnu
vishnu

Reputation: 2948

Hope this will helpful:

#navMenu {
    margin: 0 auto;
    padding: 0;
    width: auto;
    text-align: center;
    display: table;
    width: 100%;
}

#navMenu ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
    list-style-type: none;
    display: table-cell;
    width:100%
}

#navMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #008000;
    width: 33.3333%;
}

#navMenu ul li a {
    text-align: center;
    font-weight: bold;
    font-family: 'TopSecret';
    src: url('TopSecret.ttf');
         url('TopSecret.ttf') format('truetype');
    text-decoration: none;
    height: 30px;
    display: block;
    color: #FFF;
    border: 1px solid #000;
}

#navMenu ul ul {
    position: absolute;
    visibility: hidden;
    top: 32px;
}
#navMenu ul ul li {
  float: none;
  right:0;
  left:0;
  width:100%
}
#navMenu ul li:hover ul {
    visibility: visible;
}

#navMenu li:hover {
    background: #329932;
}   

#navMenu ul li:hover ul li a:hover {
    background: #329932;
    color: #000;
}

#navMenu a:hover {
    color: #000
}

.clearFloat {
    clear: both;
    margin: 0;
    padding: 0;
}
<body>
    <div style="margin: 0 auto;">
        <div id="navMenu">
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="#">Gallery</a>
                    <ul>
                        <li><a href="#>2018</a></li>
                        <li><a href="#">2017</a></li>
                        <li><a href="#">2016</a></li>
                        <li><a href="#">2015</a></li>
                    </ul>
                </li>
                <li><a href="tankreviews.html">Shop</a>
                </li>
            </ul>
            <br class="clearFloat">
        </div>
    </div>
</body>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

Is this what you need? I have replaced the floats and used flexbox.

#navMenu {
  width: 1436px;
}

#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

#navMenu li {
  background: #008000;
  width: calc(100% / 3);
  border: 1px solid #000;
  text-align: center;
}

#navMenu ul li a {
  font-weight: bold;
  font-family: 'TopSecret';
  text-decoration: none;
  width: 100% display: block;
  color: #FFF;
}

#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 40px;
  display: flex;
  flex-wrap: wrap;
}

#navMenu ul ul li {
  width: 100%;
}

#navMenu ul li:hover ul {
  visibility: visible;
}

#navMenu li:hover {
  background: #329932;
}

#navMenu ul li:hover ul li a:hover {
  background: #329932;
  color: #000;
}

#navMenu a:hover {
  color: #000
}
<div style="margin: 0 auto;">
  <div id="navMenu">
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="#">Gallery</a>
        <ul>
          <li><a href="#">2018</a></li>
          <li><a href="#">2017</a></li>
          <li><a href="#">2016</a></li>
          <li><a href="#">2015</a></li>
        </ul>
      </li>
      <li><a href="tankreviews.html">Shop</a>
      </li>
    </ul>
  </div>
</div>

Upvotes: 0

sol
sol

Reputation: 22929

You can use flexbox for this:

#navMenu {
  margin: 0 auto;
  padding: 0;
  width: auto;
  text-align: center;
  display: flex;
  width: 100%;
}

#navMenu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  list-style-type: none;
  width: 100%;
  display: flex;
}

#navMenu ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  background: #008000;
  flex: 1;
}

#navMenu ul li a {
  text-align: center;
  font-weight: bold;
  font-family: 'TopSecret';
  src: url('TopSecret.ttf');
  url('TopSecret.ttf') format('truetype');
  text-decoration: none;
  height: 30px;
  display: block;
  color: #FFF;
  border: 1px solid #000;
}

#navMenu ul ul {
  position: absolute;
  visibility: hidden;
  top: 32px;
  display: flex;
  flex-direction: column;
}

#navMenu ul li:hover ul {
  visibility: visible;
}

#navMenu li:hover {
  background: #329932;
}

#navMenu ul li:hover ul li a:hover {
  background: #329932;
  color: #000;
}

#navMenu a:hover {
  color: #000
}

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0;
}
<div>
  <div id="navMenu">
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="#">Gallery</a>
        <ul>
          <li>
            <a href="#">2018</a>
          </li>
          <li>
            <a href="#">2017</a>
          </li>
          <li>
            <a href="#">2016</a>
          </li>
          <li>
            <a href="#">2015</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="tankreviews.html ">Shop</a>
      </li>
    </ul>
    <br class="clearFloat ">
  </div>
</div>

Upvotes: 3

Related Questions