Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Jun 2014
    Posts
    17
    Member #
    39349

    How to make this navbar fit full width?

    Hi,

    I would like to make the navbar in my header 100% of the page, here's the html and css code below:

    HTML Code:
     <div class="nav_container"> 
    
    <nav>
    <ul class="fancyNav">
    
     <li id="home"><a href="http://www.worldclassads.com/index.php" class="homeIcon">Home</a></li>
     <li id="about"><a href="http://www.worldclassads.com/index.php?page=index/about">About us</a></li> 
     <li id="contact"><a href="http://www.worldclassads.com/index.php?page=user/support">Contact us</a></li>
     <li id="faqs"><a href="http://www.worldclassads.com/index.php?page=index/faqs">FAQ's</a>
     <li id="linktous"><a href="http://www.worldclassads.com/index.php?page=index/linktous">Link To Us</a></li>
     <li id="advertise"><a href="http://www.worldclassads.com/index.php?page=index/advertise">Advertise With Us</a>
     <li id="test"><a href="http://www.worldclassads.com/index.php?page=index/postad">Post an Ad</a>
     </li>
     
                    
     </ul>
     </nav>
     </div>


    Code:
    /*----------------------------
    	CSS3 Animated Navigation
    -----------------------------*/
    
    
    .fancyNav{
    	/* Affects the UL element */
    	overflow: hidden;
    	display: inline-block;
    }
    
    .fancyNav li{
    	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
    	
    	background-color: #f0f0f0;
    	background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    	background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    	background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    	background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    	background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    	
    	border-right: 1px solid rgba(9, 9, 9, 0.125);
    	
    	/* Adding a 1px inset highlight for a more polished efect: */
    	
    	box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    	-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    	-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    	
    	position:relative;
    	
    	float: left;
    	list-style: none;
    }
    
    .fancyNav li:after{
    
    	/* This creates a pseudo element inslide each LI */	
    	
    	content:'.';
    	text-indent:-9999px;
    	overflow:hidden;
    	position:absolute;
    	width:100%;
    	height:100%;
    	top:0;
    	left:0;
    	z-index:1;
    	opacity:0;
    	
    	/* Gradients! */
    	
    	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    	
    	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
    	
    	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    	
    	/* This will create a smooth transition for the opacity property */
    	
    	-moz-transition:0.25s all;
    	-webkit-transition:0.25s all;
    	-o-transition:0.25s all;
    	transition:0.25s all;
    }
    
    /* Treating the first LI and li:after elements separately */
    
    .fancyNav li:first-child{
    	border-radius: 4px 0 0 4px;
    }
    
    .fancyNav li:first-child:after,
    .fancyNav li.selected:first-child:after{
    	box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    	-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    	-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    	
    	border-radius:4px 0 0 4px;
    }
    
    .fancyNav li:last-child{
    	border-radius: 0 4px 4px 0;
    }
    
    /* Treating the last LI and li:after elements separately */
    
    .fancyNav li:last-child:after,
    .fancyNav li.selected:last-child:after{
    	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    	
    	border-radius:0 4px 4px 0;
    }
    
    .fancyNav li:hover:after,
    .fancyNav li.selected:after,
    .fancyNav li:target:after{
    	/* This property triggers the CSS3 transition */
    	opacity:1;
    }
    
    .fancyNav:hover li.selected:after,
    .fancyNav:hover li:target:after{
    	/* Hides the targeted li when we are hovering on the UL */
    	opacity:0;
    }
    
    .fancyNav li.selected:hover:after,
    .fancyNav li:target:hover:after{
    	opacity:1 !important;
    }
    
    /* Styling the anchor elements */
    
    .fancyNav li a{
    	color: #5d5d5d;
    	display: inline-block;
    	font: 20px/1 Lobster,Arial,sans-serif;
    	padding: 12px 35px 14px;
    	position: relative;
    	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    	z-index:2;
    	text-decoration:none !important;
    	white-space:nowrap;
    }
    
    .fancyNav a.homeIcon{
    	background:url('../navbar/img/home.png') no-repeat center center;
    	display: block;
    	overflow: hidden;
    	padding-left: 12px;
    	padding-right: 12px;
    	text-indent: -9999px;
    	width: 16px;
    }
    
    
    /*-------------------------
    	Demo Page Styles
    --------------------------*/
    
    
    h1,h2{
    	color: #fff;
    	line-height: 1;
    	background-color: #222;
    	font-family: 'Segoe UI Light','Segoe UI',Arial,sans-serif;
    	font-weight: normal;
    	margin: 0 auto;
    	position: absolute;
    	left: 50%;
    	margin-left: -446px;
    }
    
    h1{
    	font-size: 36px;
    	padding: 5px 15px 10px;
    	top: 0;
    }
    
    h2{
    	font-size: 14px;
    	padding: 4px 13px 9px 11px;
    	top: 51px;
    }
    
    header{
    	display:block;
    	margin-top:50px;
    	position:relative;
    }
    
    .nav_container {background-color:#f5f5f5; background-image: url('../../images/textures/brushed-alum-dark.png'); border-bottom: 2px solid #000; float: left; width: 100%;}
    
    nav{
    	display: block;
    	float: left;
    	margin: 0 auto 0;
    	text-align: center;
    	width: 	auto;
    }
    
    footer{
    	color: #BBBBBB;
    	font-size: 15px;
    	line-height: 1.6;
    	padding: 60px 20px 0;
    	text-align: center;
    	display:block;
    }
    
    footer b{
    	color: #888888;
    	display: block;
    	font-size: 10px;
    	font-weight: normal;
    }
    
    a, a:visited {
    	text-decoration:none;
    	outline:none;
    	color:#54a6de;
    }
    
    a:hover{
    	text-decoration:underline;
    }
    Thank you
    Brian

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Is the nav wrapped inside any other div? If not simply put a rule of "width:100%;" for the nav-container div or the nav tag itself


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  4. #3
    Junior Member
    Join Date
    Jun 2014
    Posts
    17
    Member #
    39349
    Quote Originally Posted by Vapr_Arts View Post
    Is the nav wrapped inside any other div? If not simply put a rule of "width:100%;" for the nav-container div or the nav tag itself


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    I tried that but it doesn't fit the whole width

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Thats why i asked if its wrapped in another div.. I didnt notice the "width:auto;" tho.. U should remove that as well.. Can u post the whole body of the website by any chance?


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  6. #5
    Junior Member
    Join Date
    Jun 2014
    Posts
    17
    Member #
    39349
    Quote Originally Posted by Vapr_Arts View Post
    Thats why i asked if its wrapped in another div.. I didnt notice the "width:auto;" tho.. U should remove that as well.. Can u post the whole body of the website by any chance?

    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    Here's just the nav html (omitted the remaining code due to limit): (I have attached the complete header.php file if needed)

    HTML Code:
    <!-- Navigation Menu -->
    
    <div class="nav_container" style="width: 100%"> 
    
    <nav>
    <ul class="fancyNav" style="width: 100%">
    
     <li id="home"><a href="http://www.worldclassads.com/index.php" class="homeIcon">Home</a></li>
     <li id="about"><a href="http://www.worldclassads.com/index.php?page=index/about">About us</a></li> 
     <li id="contact"><a href="http://www.worldclassads.com/index.php?page=user/support">Contact us</a></li>
     <li id="faqs"><a href="http://www.worldclassads.com/index.php?page=index/faqs">FAQ's</a>
     <li id="linktous"><a href="http://www.worldclassads.com/index.php?page=index/linktous">Link To Us</a></li>
     <li id="advertise"><a href="http://www.worldclassads.com/index.php?page=index/advertise">Advertise With Us</a>
     <li id="test"><a href="http://www.worldclassads.com/index.php?page=index/postad">Post an Ad</a>
     </li>
     
     </ul>
     </nav>
     </div>
    Attached Files Attached Files

  7. #6
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Ill have to check it out when im on my computer cant download it onto my phone


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  8. #7
    Senior Member
    Join Date
    Nov 2013
    Posts
    146
    Member #
    37737
    Liked
    15 times
    Downloaded and uploaded to a web server but unable to view because we also need the style.css and any other stylesheets that you made besides bootstrap! And it looks like it was created by a CMS or something because major errors when opening! Can you just link us to the live copy of the actual site? thanks.

  9. #8
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Ul is 100% of nav width. Nav width isn't defined. Parent div is 100% width of its parent. What is the parent width none knows... So... Set all parents width. Even body. Than we will see.
    Last edited by sasha_bolcina; Sep 10th, 2014 at 10:18 AM.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:40 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com