SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Infinite strech nav bar

    Hello,

    I'm wondering how to make my nav bar strech infinitely across this webpage, http://ampvibe.blogspot.com.

    Here is the CSS I am working with for that specific div:

    Code:
    #cssmenu ul {
      margin: 0;
      padding: 0;
    }
    #cssmenu li {
      margin: 0;
      padding: 0;
    }
    #cssmenu a {
      margin: 0;
      padding: 0;
    }
    #cssmenu ul {
      list-style: none;
    }
    #cssmenu a {
      text-decoration: none;
    }
    #cssmenu {
    float: left;
      height: 30px;
      background-color: #303030;
      box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
      width: 100%;
    }
    #cssmenu > ul > li {
      float: left;
      margin-left: 15px;
      position: relative;
    }
    #cssmenu > ul > li > a {
      color: #a0a0a0;
      font-family: Verdana, 'Lucida Grande';
      font-size: 14px;
      line-height: 30px;
      padding: 15px 20px;
      -webkit-transition: color .15s;
      -moz-transition: color .15s;
      -o-transition: color .15s;
      transition: color .15s;
    }
    #cssmenu > ul > li > a:hover {
      color: #a729d9;
    }
    #cssmenu > ul > li > ul {
      opacity: 0;
      visibility:hidden;
      padding: 16px 0 20px 0;
      background-color: #fafafa;
      text-align: left;
      position: absolute;
      top: 55px;
      left: 50%;
      margin-left: -90px;
      width: 180px;
      -webkit-transition: all .3s .1s;
      -moz-transition: all .3s .1s;
      -o-transition: all .3s .1s;
      transition: all .3s .1s;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    }
    #cssmenu > ul > li:hover > ul {
      opacity: 1;
      top: 65px;
      visibility: visible;
    }
    #cssmenu > ul > li > ul:before {
      content: '';
      display: block;
      border-color: transparent transparent #fafafa transparent;
      border-style: solid;
      border-width: 10px;
      position: absolute;
      top: -20px;
      left: 50%;
      margin-left: -10px;
    }
    #cssmenu > ul ul > li {
      position: relative;
    }
    #cssmenu ul ul a {
      color: #323232;
      font-family: Verdana, 'Lucida Grande';
      font-size: 13px;
      background-color: #fafafa;
      padding: 5px 8px 7px 16px;
      display: block;
      -webkit-transition: background-color 0.1s;
      -moz-transition: background-color 0.1s;
      -o-transition: background-color 0.1s;
      transition: background-color 0.1s;
    }
    #cssmenu ul ul a:hover {
      background-color: #f0f0f0;
    }
    #cssmenu ul ul ul {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top: -16px;
      left: 206px;
      padding: 16px 0 20px 0;
      background-color: #fafafa;
      text-align: left;
      width: 180px;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    }
    #cssmenu ul ul > li:hover > ul {
      opacity: 1;
      left: 190px;
      visibility: visible;
    }
    #cssmenu ul ul a:hover {
      background-color: #ab25cc;
      color: #f0f0f0;
    Last edited by ralph.m; Dec 29, 2013 at 22:05. Reason: added code tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Jmatty. You could keeps things simple and just do this:

    .tabs-outer {overflow:hidden; background: #303030;}

  3. #3
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph.m,

    Thanks for replying! However, when I place that code in it completely takes away my nav bar making it transparent. I want the grey bar to be infinitely stretched across the window while keeping the content of the navigations centered within the widths of my blog.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    That code should do that. Try it at the end of your style sheet to start with. There may be other things you need to remove to avoid overrides, but it works for me when I stick it in. Place it in there and we can see what's overriding it. Make sure to refresh your browser a few times after uploading the new code, too.

  5. #5
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    I guess you also have to adapt the width of the Facebook-span and the FB-iframe.
    They are now 450px, overflowing the page width, and they cause the horizontal scrollbar. With Ralph's navbar code the navbar is ending at 100% of the screen width, normally exactly what you need, but in this case the right side of the navbar(color) doesn't show above the 100% if you scroll to the right.
    Solution is: a smaller width of the FB-stuff; if I give it a width of 350px, no scrollbar appears and everything is fine.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •