CSS responsive menu width

Question

I'm making a simple website and I'm struggling one one thing...

Exactly, it's a menu navbar. I've done it, but it's only positioning in left corner. What I want to do is to continue the color strip (#333) to the very end of the screen. Here is the code:

#primary_nav_wrap {
  margin: 0;
  float: left;
}

#primary_nav_wrap ul {
  background-color: #333;
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#rectangle {
  float: right;
  position: relative;
  width: 1200px;
  overflow: hidden;
  background: #333;
}

#primary_nav_wrap ul a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  line-height: 50px;
  padding: 0 20px;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
  background: #4CAF50
}

#primary_nav_wrap ul li:hover {
  background: #282828
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

<nav id="primary_nav_wrap">
  <ul>

    <li class="current-menu-item"><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">About me</a></li>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">MenuMenu</a></li>
        <li><a href="#">MenuMenuMenu</a></li>
      </ul>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a>
        <ul>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">WutWut</a></li>

        </ul>
      </li>
      <li><a href="#">Contact</a></li>

  </ul>
  <!--
  <div id="rectangle"></div>
  -->
</nav>

I am still learning CSS, HTML and JS and this is my first attempts... Some code are mine, some not, but hey.. I'm trying to learn :) The struggle is to continue menu background color (#333) to the end of the right side. As you can see I was trying to do that using a rectangle (do not kill me for that, please) and didn't worked out properly, ofc... Help :(

Flowen · Accepted Answer · 2017-09-01 07:28:02Z

1

#primary_nav_wrap {
width: 100%;
background:#333;
}

Just give 100% width and color the background

answered Sep 1, 2017 at 7:28

Flowen

3951 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RaJesh RiJo · Accepted Answer · 2017-09-01 07:28:36Z

Simply set the width as 100% to #primary_nav_wrap and #primary_nav_wrap ul.

#primary_nav_wrap {
  margin: 0;
  float: left;
  width: 100%;
}

#primary_nav_wrap ul {
  background-color: #333;
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}

#rectangle {
  float: right;
  position: relative;
  width: 1200px;
  overflow: hidden;
  background: #333;
}

#primary_nav_wrap ul a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  line-height: 50px;
  padding: 0 20px;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0
}

#primary_nav_wrap ul li.current-menu-item {
  background: #4CAF50
}

#primary_nav_wrap ul li:hover {
  background: #282828
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
  padding: 0
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}

#primary_nav_wrap ul li:hover>ul {
  display: block
}

<nav id="primary_nav_wrap">
  <ul>

    <li class="current-menu-item"><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">About me</a></li>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">MenuMenu</a></li>
        <li><a href="#">MenuMenuMenu</a></li>
      </ul>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a>
        <ul>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenuMenu</a></li>
          <li><a href="#">MenuMenu</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">WutWut</a></li>

        </ul>
      </li>
      <li><a href="#">Contact</a></li>

  </ul>
  <!--
  <div id="rectangle"></div>
  -->
</nav>

Collectives™ on Stack Overflow

CSS responsive menu width

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related