1

I can't seem to get my menu 100% of the browser. I want a logo beside the menu in the header to. I tried in the CSS to add a background colour and width or 100% but this didn't work

Here is my code

#logo {
  padding-top: 10px;
  padding-left: 85px;
  float: left;
}
/*----- Top Level -----*/

#menu2 {
  background: #3b3b3b;
}
.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
/*----- Bottom Level -----*/

.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1;
}
.sub-menu {
  width: 160%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
}
.sub-menu li {
  display: block;
  font-size: 16px;
}
.sub-menu li a {
  padding: 10px 30px;
  display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
}
<div id="menu2">
  <div id="logo">
    <img src="logo2.png" alt="logo" />

  </div>
  <div class="menu-wrap">
    <nav class="menu">

      <ul class="clearfix">
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>

        <li>
          <a href="#">What's On</a>

          <ul class="sub-menu">
            <li><a href="#">Sunday Services</a>
            </li>
            <li><a href="#">Speical Events</a>
            </li>
            <li><a href="#">Sunday School</a>
            </li>
            <li><a href="#">Youth Group</a>
            </li>
            <li><a href="#">Prayer Meeting</a>
            </li>
            <li><a href="#">Coffee Morning</a>
            </li>
            <li><a href="#">Woman's Fellowship</a>
            </li>
            <li><a href="#">Craft Class</a>
            </li>
            <li><a href="#">Diners Club</a>
            </li>

          </ul>
        </li>
        <li><a href="contact.php">Get In Touch</a>
        </li>
        <li class="current-item"><a href="findus.php">Find Us</a>
        </li>

      </ul>
    </nav>
  </div>
svick
  • 236,525
  • 50
  • 385
  • 514
becky
  • 81
  • 2
  • 8

2 Answers2

1

You just need to clear the floats: It's call a clearfix

There are many method of doing this...one is to add overflow:hidden to the wrapper

#menu2 {
  background: #3b3b3b;
  overflow: hidden;
  /* quick clearfix */
}

Codepen Demo

#logo {
  padding-top: 10px;
  padding-left: 85px;
  float: left;
}
/*----- Top Level -----*/

#menu2 {
  background: #3b3b3b;
  overflow: hidden;
  /* quick clearfix */
}
.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
/*----- Bottom Level -----*/

.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1;
}
.sub-menu {
  width: 160%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
}
.sub-menu li {
  display: block;
  font-size: 16px;
}
.sub-menu li a {
  padding: 10px 30px;
  display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
}
<div id="menu2">
  <div id="logo">
    <img src="logo2.png" alt="logo" />

  </div>
  <div class="menu-wrap">
    <nav class="menu">

      <ul class="clearfix">
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>

        <li>
          <a href="#">What's On</a>

          <ul class="sub-menu">
            <li><a href="#">Sunday Services</a>
            </li>
            <li><a href="#">Speical Events</a>
            </li>
            <li><a href="#">Sunday School</a>
            </li>
            <li><a href="#">Youth Group</a>
            </li>
            <li><a href="#">Prayer Meeting</a>
            </li>
            <li><a href="#">Coffee Morning</a>
            </li>
            <li><a href="#">Woman's Fellowship</a>
            </li>
            <li><a href="#">Craft Class</a>
            </li>
            <li><a href="#">Diners Club</a>
            </li>

          </ul>
        </li>
        <li><a href="contact.php">Get In Touch</a>
        </li>
        <li class="current-item"><a href="findus.php">Find Us</a>
        </li>

      </ul>
    </nav>
  </div>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

The background in the css should be background-color: #FFFFFF