4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Trouble With Drop Down Navigation

by jbearnolimits
3 replies
  • WEB DESIGN
    • |
I am trying to figure out why the mobile drop down navigation is not floating to the right of the HorizonNagigationLogo div. I also would like to figure out how to make the drop down menu take up 100% of the screen with 2 links side by side. Could someone look at this code and tell me where I am going wrong? Right now the mobile drop down image sits under the logo and the sub links only take the width of the HorizonNagigationMobile div.

Code:
*  { 

margin : 0; 

padding : 0; 
} 
 body  { 

margin : 0; 

padding : 0; 
}
 .HorizonNagigationcontainer {

width : 100%;
}
 .HorizonNagigationLogo {

width : 72%;

height : 74px;

margin-top : 2%;

float : left;

margin-left: 3%;
}
 .HorizonNagigationLogo img {

width : 100%;

max-width : 319px;

float : left;
}
 .HorizonNagigationMobile {  

width: 25%; 
}
 .HorizonNagigationMobile ul{ 
    
list-style:none; 

font-weight:bold; 

float:left;

width:100%;

position:relative; 

z-index:5;

background-color: rgba(255,255,255,0); 
}
 .HorizonNagigationMobile li{  
    
float:right; 
    
position:relative; 

width: 100%; 
}
 .HorizonNagigationMobile a{  
    
display:block;  
    
padding-top:10px; 

padding-bottom:10px; 

width: 100%; 
    
color:#fff; 
    
background: rgba(255,255,255,0); 
    
text-decoration:none; 
}
 .HorizonNagigationMobile a:hover{ 
    
color:#fff; 
    
background:#FFCC66; 
    
text-decoration:underline; 
}

/*--- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- 

--- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- 

--- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- --- DROPDOWN --- 

*/
 .HorizonNagigationMobile ul ul{   
    
background:#fff; 
    
background: rgba(255,255,255,0); 
    
list-style:none; 
    
position:absolute; 
    
left:-9999px; 

width:100%; 
}
 .HorizonNagigationMobile ul li ul li { 
    
padding-top:1px; 
    
float: none; 

width: 100%; 
}
 .HorizonNagigationMobile ul a{  

width: 100%; 
}
 .HorizonNagigationMobile li:hover ul{ 
    
left: 0; 
}
 .HorizonNagigationMobile li:hover a{ 
    
background:#FFCC66; 
    
text-decoration:underline; 
}
 .HorizonNagigationMobile li:hover ul a{ 
    
text-decoration:none;
}
 .HorizonNagigationMobile li:hover ul li a:hover{ 
    
background:#FF9900;
}
Here is the html:

Code:
<div class="HorizonNagigationcontainer">
                <div class="HorizonNagigationLogo">
                <img src="images/logo.jpg" alt="Logo">
                </div>

<div class="HorizonNagigationMobile">
             <ul>
	        <li><a href="#"><img alt="Navigation" src="images/mobileimg.png"></a>
             <ul>
	         <li><a href="#">Home</a></li>
	         <li><a href="#">Services</a></li>
	         <li><a href="#">Our Difference</a></li>
	         <li><a href="#">Contact Us</a></li>
             </ul></li>
             </ul>
</div>
</div>
#drop #navigation #trouble
  • Profile picture of the author Adrianhenry
    You haven't specified the display or float properties for the nav bar. Whereas you have specified that the logo is floated left.

    What this means is the navbar will just default to being a block level element and therefor will not wrap to the right of your logo.

    You either need to set the nav bar to display: inline-block or float: left.

    Both will do the job you need. Using display is the more "correct way" to do it.
    Signature
    {{ DiscussionBoard.errors[10131512].message }}
  • Profile picture of the author Adrianhenry
    Originally Posted by jbearnolimits View Post

    I am trying to figure out why the mobile drop down navigation is not floating to the right of the HorizonNagigationLogo div. I also would like to figure out how to make the drop down menu take up 100% of the screen with 2 links side by side. Could someone look at this code and tell me where I am going wrong? Right now the mobile drop down image sits under the logo and the sub links only take the width of the HorizonNagigationMobile div.
    As for the bolded question. There is no way to do this using only HTML and CSS as far as I am aware. You will need to introduce javascript. Create a div with the nav elements in it and set the width to 100% and visibility to hidden. Then using jQuery you could add a hover state that will turn the visibility to visible.
    Signature
    {{ DiscussionBoard.errors[10131520].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by Adrianhenry View Post

      As for the bolded question. There is no way to do this using only HTML and CSS as far as I am aware. You will need to introduce javascript. Create a div with the nav elements in it and set the width to 100% and visibility to hidden. Then using jQuery you could add a hover state that will turn the visibility to visible.
      Thanks, I actually figured out what was going wrong with the float issue above. While I was figuring that out I managed to get this problem solved as well....BUT after playing around with the code I changed it back and forgot how I lined them up side by side LOL! Now I have to figure it out again. I know it can be done though because I have done it before on another site.
      {{ DiscussionBoard.errors[10131687].message }}

Trending Topics