I have a horizontal nav bar and my links are lining up diagonally instead of horizontally. There are also bullets showing up by the links too.
Here is my HTML:
<nav id="site" class="body">
<ul>
<li id="meet">Meet the Staff</li>
<li id="conditions">Conditions</li>
<li id="info">Patient Information</li>
<li id="billing">Billing & Insurance</li>
<li id="contact"><a id="right" href="https://painandspinecenter.myezyaccess.com">Contact Us</a></li>
</ul>
My CSS
nav a {
color: #ffffff;
font-size:13px;
list-style:none;
text-decoration:none;
margin: 0 auto;
}
nav li a {
display: block;
float: left;
list-style: none;
height: 44px;
text-align: center;
border-right: 1px solid #fff;
padding-top:10px;
width: 157px;
margin: 0 auto;
text-decoration:none;
}
nav li a#right {
border-right: none;
text-align:top;
}
The website is painandspinecenter.net
any help would be GREATLY APPRECIATED!
I think this is what you wanted. See the fiddle here : http://jsfiddle.net/fyw435h3/
You were missing this from your CSS
nav li{
display: inline;
}
You have some errors that consist in using your A tags as block elements when you should have benn using your LI tags, consider changing your CSS to the following:
#site {
background:#069
}
nav a {
color: #ffffff;
font-size:13px;
list-style:none;
text-decoration:none;
margin: 0 auto;
}
nav li {
display:inline-block;
list-style: none;
height: 44px;
text-align: center;
border-right: 1px solid #fff;
padding-top:10px;
width: 140px;
margin: 0 auto;
text-decoration:none;
}
nav li a#right {
border-right: none;
text-align:top;
}
<nav id="site" class="body">
<ul>
<li id="meet">Meet the Staff
</li>
<li id="conditions">Conditions
</li>
<li id="info">Patient Information
</li>
<li id="billing">Billing & Insurance
</li>
<li id="contact"><a id="right" href="https://painandspinecenter.myezyaccess.com">Contact Us</a>
</li>
</ul>
</nav>
Related
I'm having trouble aligning my drop down menu in my nav bar, I've tried every suggestion out there. I've tried left, float: left, right, and pretty much everything else. I think it is possibly something interfering. The drop down menu has everything aligned from center to right of the parent menu item.
https://jsfiddle.net/ethacker/j7tgq95j/3/
My html code:
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul>
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<!--
Gender Predictions:
Old Wive's Tale
Boy vs Girl- The Ramzi Method
-->
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<!--
Birthdays - Link to 1-10th bdays.
-->
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<!--
Drop Down Menu:
DIY
Purchases
(Both to have holiday/event selectors on right of page)
-->
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
My css code:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
position: absolute;
list-style-type: none;
margin:0;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home{
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}
This will align the submenu to the left:
.navMenu .parentMenu .sub-menu {
display: none;
position:absolute;
list-style-type: none;
padding:0;
margin: 0;
left:-1px;
top:27px;
}
.navMenu .parentMenu:hover .sub-menu {
display: block;
}
https://jsfiddle.net/am13qur4/
you did not specify where you want to align your drop down elements. Do you want to align all to the right, center or left. I assumed left so try adding the code below. You may need to adjust the left attribute's value and your hover background styling too.
.sub-menu a{
position: absolute;
left: 3%;
}
Let me know if this helps. Stay warm!
I want the position of my navigation to be fixed. But when I change the position to "fixed" in nav, it looks very weird.
Here are two examples:
Without fixed position: https://jsfiddle.net/Timowo/3nrvch3c/
<nav>
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
With fixed position: https://jsfiddle.net/Timowo/5aock5k1/
<nav style="position: fixed;">
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
What do I have to change so it's inline but also fixed?
Thanks!
With position:fixed the element will collapse to the width of the widest descendant..in the absence of a defined width.
Just set width:100%
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
background-color: red;
}
nav {
transition: all 0.2s ease-in-out;
position: fixed;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
nav ul li.logo {
padding: 14px;
float: left;
}
nav ul li.logotext {
font-family: Futura;
color: white;
font-size: 1.3em;
padding: 28px;
text-shadow: 3px 3px black;
}
nav ul li.category a {
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 1.2em;
float: right;
font-family: Futura;
text-shadow: 3px 3px black;
}
nav ul li.category:hover a {
background-color: #212121;
}
nav ul li.active a {
background-color: #212121;
}
<nav>
<ul>
<li class="category">Contact
</li>
<li class="category">Work
</li>
<li class="category active">Home
</li>
<li class="logotext">Logo</li>
</ul>
</nav>
This is a double part fragment of dropdown menu with double part the issue is that I cannot make the two div be aside each other unless I use the div width to any ration.
the CSS code what I want is a method to display the two div below aside each other without using the width property in the html code.
.navbar ul li a{
text-decoration: none;
color: black;
padding: 16.2px;
display: block;
}
.navbar{
width: 100%;
height: 50px;
position: relative;
margin: 0;
padding: 0;
background-color: #c7ffff;
border:1px solid black;
}
.dropnavbar{
position: absolute;
margin: 0;
padding: 0;
height: 60px;/*can be negliacted if the default is auto*/
}
.active{
float: left;
text-align: center;
list-style: none;
width: 100px;
font-size: 15px;
}
.subnavbar{
display:none;
padding: 0;/*if forgotten the size of the dropdown nav will be greater than it's parrent*/
margin: 0;
}
.navbar li:hover .subnavbar{
display: block;
}
.navbar li:hover li,.navbar li:hover{
background-color:#e0ffff;
}
.subnavbar>li>a:hover{
background-color: aqua;
}
.subnavbar>li:nth-child(n+2){
border-top: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<link href="navbar.css" rel="stylesheet">
<title>DropDown NavBar Trial 3</title>
</head>
<body>
<header>
<div class="navbar">
<ul class="dropnavbar">
<li class="active">About
</li>
<li class="active">Branches
<ul class="subnavbar">
<li class="active">Egypt
</li>
<li class="active">USA
</li>
<li class="active">UAE
</li>
<li class="active">France
</li>
</ul>
</li>
<li class="active">Categories
<div style="width:auto;">
<div style="float:left; width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
<div style="float:right;width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
</div>
</li>
<li class="active">Paying
</li>
</ul>
</div>
</header>
</body>
</html>
I hope this example will help you out!!!!
* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}
<ul id="nav">
<li>Link1</li>
<li>Link2
<ul>
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Link3</li>
</ul>
I wrote a code using different internet source and I ran into a problem every object that's in the bottom of the menu parts cannot be interacted the menu interferes everything below him where the dropdown falls . the hitbox of the menu seems to included the dropdown even when its not shown
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Help will be appreciated
edit:
the menu is working but everything below him in the area where the dropdown fals dosent
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!