I really need help on alignment of navbar in fixed header
I want the text above the nav bar to be to the left of the nav bar in the menuTop and the navbar to be to the very right in menuTop
JS Fiddle: http://jsfiddle.net/g2Sr9/
HTML:
<div class="myMenuTop">
<span class="myFont1">Company™</span>
<ul id="navmenu">
<li>1</li>
<li>2</li>
<li>
3<span class="darrow">👇</span>
<ul class="sub1">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
<li>
4<span class="darrow">👇</span>
<ul class="sub1">
<li>4.1</li>
<li>4.2</li>
<li>
4.3<span class="rarrow">👉</span>
<ul class="sub2">
<li>4.3.1</li>
<li>4.3.2</li>
<li>4.3.3</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
</div>
CSS:
.myMenuTop {
height:40px;
width:100%;
min-width:536px;
background-color:#000;
position:fixed
}
.myLogo {
height:300px;
width:100%;
min-width:536px;
border-bottom:1px solid #000;
border-top:1px solid #000;
align:center;
text-align:center
}
* {
margin:0;
padding:0
}
.img1 {
height:211px;
width:550px;
min-width:500px
}
/* RULES FOR NAVIGATION MENU*/
/* ================================================ */
ul#navmenu,ul.sub1,ul.sub2 {
list-style-type:none;
font-size:9pt
}
ul#navmenu li {
width:100px;
position:relative;
text-align:center;
float:left;
margin-right:4px
}
ul#navmenu a {
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
background-color:red;
border:1px solid #CCC;
border-radius:5px
}
ul#navmenu .sub1 a {
margin-top:5px
}
ul#navmenu .sub2 a {
margin-left:10px
}
ul#navmenu li:hover > a {
background-color:grey
}
ul#navmenu li:hover a:hover {
background-color:#FA07AD
}
ul#navmenu ul.sub1 {
display:none;
position:absolute;
top:26px;
left:0
}
ul#navmenu ul.sub2 {
display:none;
position:absolute;
top:0;
left:101px
}
ul#navmenu li:hover .sub1 {
display:block
}
ul#navmenu .sub1 li:hover .sub2 {
display:block
}
.darrow {
position:absolute;
top:5px;
right:4px;
font-size:11pt
}
.rarrow {
position:absolute;
top:6px;
right:4px;
font-size:13pt
}
You just need to set the float element to be left for the left aligned content and right content to the right.
.myFont1{
float: left;
margin-top: 20px;
}
#navmenu{
float: right;
margin-top: 5px;
}
really all you need is a float: left applied to .mylogo, and a float: right applied to #navmenu to accomplish exactly what you asked.
.mylogo {
float: left;
}
#navmenu {
float: right;
}
I have changed it please check and revert back, Please expand the result window a bit so that both can be accommodated in the bar.
Changed some css
myMenuTop -> float:left; display:inline block;
navmenu -> float:right
Fiddle
Related
I have a Functional Vertical Menu. On hover state it has a vertical line that changes from same Background color to a specific color, but what I want is to create a line that follows to the selected menu área.
Attached my Actual Code and the GIF example of what I'm trying to Achieve, someone can help me?
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
CSS
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;
}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul li a:hover{
border-left-color:#0099FF;
color:#0066FF;
background:#c4c4c4;
}
You could use after pseudoelement in your ul hidden and the with a simnple transition and jquery you can make it move playing with the top property.
like this:
$('.upli').hover(function () {
$(this).parent('ul').toggleClass('up');
});
$('.downli').hover(function () {
$(this).parent('ul').toggleClass('down');
});
#nav ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute; left:200px; top:200px;}
#nav ul li{display: inline;}
#nav ul li a{
display:block;
background:#fff;
width:200px;
text-decoration:none;
padding:4px 7px ;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
}
#nav ul:after {
content:'';
width:5px;
height:28px;
display:block;
position:absolute;
opacity:0;
top:14px;
left:0;
background-color:#0099FF;
transition: top 0.5s ease;
}
#nav .up:after {
top:0px;
opacity:1;
}
#nav .down:after {
top:28px;
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul class="">
<li class="upli">Example 1</li>
<li class="downli">Example 2</li>
</ul>
</div>
How about this really nice and clean solution (also extendable to an infinite amount of <li> items ;)
$('li').hover(function() {
$(".verticalLine").css("top", $(this).position().top);
}, function() {
$(".verticalLine").css("top", "0px");
});
body {
margin: 0;
}
.nav {
position: relative;
}
.verticalLine {
background: coral;
height: 60px;
width: 5px;
position: absolute;
top: 0;
transition: top ease .5s;
left: 0;
}
ul {
margin: 0;
}
ul li {
list-style: none;
height: 60px;
line-height: 60px;
vertical-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<div class="verticalLine"></div>
<ul>
<li>Something</li>
<li>Something else</li>
<li>Something more</li>
<li>Aaaand more</li>
</ul>
</div>
EDIT:
This change the hover part to this piece of code if you want to use the click() element:
$(".nav2Li").click(function() {
$(".verticalLine").css("top", $(this).position().top);
})
I am new to css my dropdown menu is hiding behind the div please help me to find out the problem. my HTML and CSS code is:
<style>
*
{
margin:0px;
padding:0px;
}
body
{
background-color:mintcream;
}
#header
{
height:260px;
width:auto;
margin:5px;
}
#headerimg
{
height: 260px;
width:100%;
}
#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}
#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}
#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;
}
#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}
#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;
}
#wrap #menu ul li ul li
{
display:none;
}
#wrap #menu ul li:hover ul li
{
display:block;
}
#content
{
width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>
<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />
</div>
<div id="wrap">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Services
<ul>
<li>Food</li>
<li>Hospital</li>
<li>Medical</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
</div>
</body>
I am new to css. My dropdown menu is hiding behind the div. Please help me to find the problem.
Please add below css
ul {position: relative; z-index: 99999; }
Just add position:relative in "#wrap #menu ul li" . I think your problem was solved. If you have any other problem then put it here.
Thanks for asking.
I almost got this drop down menu knocked out. I'm having a problem centering it vertically. I tried to add padding and margin but one puts a weird line through my drop down areas and one puts extra spacing between my drop downs.
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li>Home</li>
<li>
About Us
<ul class="sub1">
<li>Introduction</li>
<li>Who We Are</li>
<li>Staff</li>
</ul>
</li>
<li>
Services
<ul class="sub1">
<li>Sunday Morning</li>
<li>Sunday Evening</li>
<li>Wednesday Evening</li>
</ul>
</li>
<li>Resources</li>
<li>Contact Us</li>
<li>News and Events</li>
</ul>
</div>
CSS
#navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;
position: relative;
text-align:center;
}
/* rules for nav menu */
ul#navmenu, ul.sub1, ul.sub2 {
list-style-type:none;
}
ul#navmenu li {
width:125px;
text-align:center;
position:relative;
margin-right:4px;
margin-top:10px;
display: inline-block;
}
ul#navmenu a {
text-decoration:none;
display:block;
width:125px;
height 25px;
line-height:25px;
background-color:#FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
ul#navmenu .sub1 li {
border: 1px solid green;
}
ul#navmenu .sub1 a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color:#CFC;
}
ul#navmenu li:hover a:hover {
background-color:#FF0;
}
ul#navmenu ul.sub1 {
display:none;
position:absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .sub1 {
display:block;
}
/* end rules for nav menu */
Site at http://www.joekellywebdesign.com/churchsample1/index.html
Css at http://www.joekellywebdesign.com/churchsample1/css/styles.css
You can add margin-top:10px; to the li.
Updated CSS
ul#navmenu li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#navmenu > li {
margin-top: 10px;
}
You can also combine both margins.. margin: 10px 4px 0px 0px;
Additionally, adding inline-block and removing float:left will give you this result:
Code is really, really broke on top but this should help you out a bit.
Centering things vertically is a weird task to handle in CSS and I can't really explain why you need to do this but its how I've always done it.
#myDiv {
top:50;
margin-top:-150px;
}
I am pretty new on css and I want to learn use css effectively but I have now couple of problems/questions, I want to make grey border under my menu but when I zoom in and out border behave so strangely? Sorry my code is not very clean. And how can I retouch my code for better standing?
HTML
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:#d00000;
text-decoration:underline;
}
#home{
background-color:#0000CC;
}
span{
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul>
<li>sub</li>
<li>sub2</li>
</ul>
</li><!---End of DropDown Videos menu--->
<li>link4</li>
<li>link5</li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>
CSS
#wrapper{
float:center;
}
#grey{
border-bottom:250px solid #a0a0a0;
padding:0px;
margin-left:203px;
margin-right:387px;
}
#header{
margin:auto;
padding:0px;
clear:both;
}
#header ul{
margin:0px;
padding:0px;
line-height:30px;
}
#header li{
margin:0px;
padding:0px;
list-style: none;
float:left;
position:relative;
background-color:#000099;
border:1 solid #0000CC;
top:px;
right:-15%;
}
#header ul li a{
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#header ul ul li a{
color:#0000cc;
}
#header ul ul li{
right:0%;
}
#header ul ul{
margin:0px;
padding:0px;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
}
#header ul li:hover ul {
visibility:visible;
opacity:1 ;
}
#header ul li:hover {
background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
clear:both;
margin:0px;
padding:0px;
}
Without completely reworking your code, just think of added a bottom border per 'li'...
Remove your id='grey' and add your border-bottom to your #header li {}. Refresh but note how your 'sub' menus then each have a bottom border now. They inherited it, so you then need to turn those off...hence add border-bottom: none to the #header ul ul li declaration.
Now...if we did a quick rework of your code...
HTML
<div id="wrapper">
<div id="header">
<div id="navwrapper">
<ul id="nav">
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>sub</li>
<li>sub2</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</div>
CSS
html, body { margin:10px;padding:0; }
#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }
#nav {
padding:0;
margin: 0 auto 0 auto;
line-height:30px;
height:30px;
list-style:none }
#nav li {
border-bottom: solid #a0a0a0 10px;
margin:0;
padding:0;
float:left;
background-color:#000099;
}
#nav a {
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#nav li:hover { background-color:blue; }
#nav li:hover .sub {
visibility:visible;
opacity: 1;
}
#nav .sub a { color:#00c; }
#nav .sub {
margin:0;
padding:0;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
list-style: none;
}
#nav .sub li { clear:both; border-bottom: none; }
Using more naming conventions with your sub menus is safer than just drilling down through the css. You also need to note that any top-level CSS declaration is inherited by all the children within. Such that if you declare #nav li as being black but want all the 'sub' list elements to be blue, that needs to be stated explicitly...AFTER the initial declaration in the CSS document.
Hope this helped...
There are some similar questions like this already, but none of those fixes worked for me. I want to float a <li> menu to the right, but I can't get it to do it correctly.
HTML
<div id="topnav"><ul class="topnavlinks"><li class="menu-474 first">Home</li>
<li class="menu-540 active-trail active">Our company</li>
<li class="menu-541">Blog</li>
<li class="menu-930">FAQ</li>
<li class="menu-900 last">Contact</li>
</ul></div>
CSS
#topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; }
.topnavlinks { width:980px; margin:0px auto; }
.topnavlinks ul { float:right; }
.topnavlinks li { float:left; }
.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px; }
Currently it doesn't float to the right at all, and with some other variations I have gotten it to float right, only with reversed order.
Hi I found another solution using display:flex and justify-content:flex-end
So in the original question, instead of:
.topnavlinks ul {
float:right;
}
Change it into the following:
ul.topnavlinks {
display: flex;
justify-content: flex-end;
}
It will make the navigation float right without changing order
Try adding additional container
HTML
<div id="topnav"><div class="cont"><ul class="topnavlinks"><li class="menu-474 first">Home</li>
<li class="menu-540 active-trail active">Our company</li>
<li class="menu-541">Blog</li>
<li class="menu-930">FAQ</li>
<li class="menu-900 last">Contact</li>
</ul></div></div>
CSS
.cont { width:980px; margin:0px auto; }
#topnav { width:100%; height:14px; background:#b8b8b8; border-bottom:1px solid #989898; }
.topnavlinks ul { float:right; }
.topnavlinks li { float:left; }
.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px; }
Remember there is horizontal padding of 27px.
This puts the menu to the right:
#topnav { width:100%; height:14px; border-bottom:1px solid #989898; text-align:right; }
.topnavlinks { margin:0px auto; display:inline; float:right;}
.topnavlinks ul { float:right; text-align:left; }
.topnavlinks li { display:inline; text-align: left;}
.topnavlinks a { color:#fff; text-decoration:none; padding:0px 27px;}
http://jsfiddle.net/gVnrM/
Demo
This one