I have removed a menu item from a navigation bar but now the bar does not expand to fill the screen width so it is shorter than the actual page content now. How do I make it do this? I tried putting in width:100% but that didn't make any difference.
This is the code I have:
<ul id="PrimaryNav" class="clearfix">
<li>Home</li>
<li>About/FAQ</li>
<li>Price Guide</li>
<li>Packages</li>
<!-- <li>Laser Lipo</li> -->
<li>Skincare</li>
<li>PCOS</li>
<li>Testimonials</li>
</ul>
ul#PrimaryNav {
margin: 0 auto;
padding: 0;
clear: left;
display: block;
}
ul#PrimaryNav li {
display: inline-block;
margin: 0;
padding: 0;
width: 12.5%;
float: left;
background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
ul#PrimaryNav li a {
display: block;
margin: 0;
padding: 0;
text-align: center;
line-height: 35px;
font-size: 14px;
border-right: solid 1px #f1f1f1;
border-bottom: solid 1px #dcdcdc;
}
Instead of using display: block to ul element, I used display: table; width: 100%; and for li element, I used display: table-cell instead of display: inline-block;.
CSS
ul#PrimaryNav {
margin: 0 auto;
padding: 0;
clear: left;
display: table;
width: 100%;
}
ul#PrimaryNav li {
display: table-cell;
margin: 0;
padding: 0;
background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
ul#PrimaryNav li a {
display: block;
margin: 0;
padding: 0;
text-align: center;
line-height: 35px;
font-size: 14px;
border-right: solid 1px #f1f1f1;
border-bottom: solid 1px #dcdcdc;
}
Working Fiddle
You can simply use display:table-cell for this:
http://jsfiddle.net/6fjr8uc6/
ul#PrimaryNav {
margin: 0 auto;
padding: 0;
clear: left;
width:100%;
display: table;
}
ul#PrimaryNav li {
display: table-cell;
margin: 0;
padding: 0;
background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
ul#PrimaryNav li a {
display: block;
margin: 0;
padding: 0;
text-align: center;
line-height: 35px;
font-size: 14px;
border-right: solid 1px #f1f1f1;
border-bottom: solid 1px #dcdcdc;
}
Related
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
I am not entirely sure this is possible with CSS, but I know it is with Jquery. If it is possible only with CSS, I would appreciate help that way as I don't understand Jquery at all.
I am looking to make a breakpoint at 800px. I need to hide all the li items except the logo at this breakpoint.. How do I make an exception the to logo, which is an li item as well?
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
margin: 0px;
padding: 0px;
}
h1 {
margin: 0 0 14px 0;
}
h2 {
margin: 0 0 10px 0;
}
.wht {
color: #fff;
}
.clear {
clear: both;
}
/*Vivid Page Settings*/
header {
width: 100%;
background-color: #fff;
border-bottom: #000 1px solid;
}
.vd-hide {
display: none;
}
.vd-settings-wrapper {
width: 15%;
max-width: 200px;
}
.vd-user-settings {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 0 21px;
}
.vd-currency-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 1px 2px;
}
.vd-language-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/
.vd-navigation-wrapper {
display: flex;
}
.vd-nav-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 78px;
margin: 0 auto;
text-align: center;
}
.vd-nav-wrapper ul {
font-family: 'Montserrat', sans-serif;
/* text-align: center; */
list-style: none;
padding: 0;
margin: 0;
}
.vd-nav-wrapper li {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 25px 20px;
vertical-align: middle;
}
.vd-nav-wrapper a {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 18px 20px;
vertical-align: middle;
}
.vd-logo-img {
margin: 0px;
padding: 0px;
}
/*Vivid Checkout Settings*/
.vd-cart-wrapper {
width: 10%;
z-index: 10;
}
.vd-cart-selector {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
margin: -11px 31px 0 2px;
position: absolute;
top: 23px;
right: -9px;
}
<div class="vd-navigation-wrapper">
<div class="vd-settings-wrapper">
<div class="vd-user-settings">
</div>
<div class="vd-currency-selector">
</div>
<div class="vd-language-selector">
</div>
</div>
<div class="vd-nav-wrapper">
<ul>
<li>Shop</li>
<li>About</li>
<li class="vd-logo-img"><img src="img/vivid_logo.png"/></li>
<li>Lookbook</li>
<li>Contact</li>
</ul>
</div>
<div class="vd-cart-wrapper">
<div class="vd-cart-selector"></div>
</div>
</div>
This is the selector you need. I think it's self explanatory:
.vd-navigation-wrapper li:not(.vd-logo-img) {
display: none;
}
Edit Thanks to Hajji Tark for pointing out Edge and FF do not support :not() selector. The workaround is to set display:none for all lis and override it for the exception:
.vd-navigation-wrapper li {
display: none;
}
.vd-navigation-wrapper .vd-logo-img {
display: block; /* use inline-block or list-item if appropriate */
}
Haven't understood your #media queries requirements. Let me know if you need help with those. Basically you need to wrap it in a
#media (min-width: 800px) { /* rules here */ }
or
#media (max-width: 800px) { /* rules here */ }
If you want a specific case for 800px (equal to), you can use
#media (min-width: 800px) and (max-width: 800px){ /* rules here */ }
#media only screen and ( max-width: 800px ) {
li[class!="vd-logo-img"] { display: none; }
}
Media Queries
Here, I used the CSS media queries to determine the page document current size, if it gets to 800px, then the styles will be applied to the document.
Selector
I used the attribute selector to target all the <li> element excluding the <li class="vd-logo-img"> with a class equal to "vd-logo-img"
Another option:
.vd-navigation-wrapper li {
display: none;
}
.vd-navigation-wrapper li.vd-logo-img {
display: block;
}
This is possible because CSS applies the more restrictive rule.
In your Css:
.vd-nav-wrapper li { display: none )
.vd-logo-img { display: initial }
You can use css media query and :not() trick to hide all li without the logo.
See the css section. Live On Fiddle works fine on every browser.
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
margin: 0px;
padding: 0px;
}
h1 {
margin: 0 0 14px 0;
}
h2 {
margin: 0 0 10px 0;
}
.wht {
color: #fff;
}
.clear {
clear: both;
}
/*Vivid Page Settings*/
header {
width: 100%;
background-color: #fff;
border-bottom: #000 1px solid;
}
.vd-hide {
display: none;
}
.vd-settings-wrapper {
width: 15%;
max-width: 200px;
}
.vd-user-settings {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 0 21px;
}
.vd-currency-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 12px 2px 1px 2px;
}
.vd-language-selector {
width: 58px;
height: 21px;
border: 1px solid #000;
background-color: #fff;
float: left;
margin: 3px 2px 0 2px;
}
/*Vivid Main Navigation*/
.vd-navigation-wrapper {
display: flex;
}
.vd-nav-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 75%;
height: 78px;
margin: 0 auto;
text-align: center;
}
.vd-nav-wrapper ul {
font-family: 'Montserrat', sans-serif;
/* text-align: center; */
list-style: none;
padding: 0;
margin: 0;
}
.vd-nav-wrapper li {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 25px 20px;
vertical-align: middle;
}
.vd-nav-wrapper a {
text-decoration: none;
list-style: none;
display: inline-block;
margin: 18px 20px;
vertical-align: middle;
}
.vd-logo-img {
margin: 0px;
padding: 0px;
}
/*Vivid Checkout Settings*/
.vd-cart-wrapper {
width: 10%;
z-index: 10;
}
.vd-cart-selector {
width: 48px;
height: 48px;
border: 1px solid #000;
background-color: #fff;
margin: -11px 31px 0 2px;
position: absolute;
top: 23px;
right: -9px;
}
#media only screen and (max-width:800px) {
.vd-nav-wrapper ul li:not(.vd-logo-img){
display: none;
}
}
<div class="vd-navigation-wrapper">
<div class="vd-settings-wrapper">
<div class="vd-user-settings">
</div>
<div class="vd-currency-selector">
</div>
<div class="vd-language-selector">
</div>
</div>
<div class="vd-nav-wrapper">
<ul>
<li>Shop</li>
<li>About</li>
<li class="vd-logo-img"><img src="img/vivid_logo.png" /></li>
<li>Lookbook</li>
<li>Contact</li>
</ul>
</div>
<div class="vd-cart-wrapper">
<div class="vd-cart-selector"></div>
</div>
</div>
Im working on menu, which is text justified. To make this working, I add an new line. the problem is that it should be zero pixels. However, it's breaking layout
JS fiddle to see it in work
https://jsfiddle.net/z1qsL739/1/
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some </li>
<li>some</li>
<div class="justify-fix"></div>
</ul>
</div>
Css
.registration-menu{
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list{
list-style: none;
display: inline-block;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
.justify-fix{
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li{
display: inline-block;
line-height: 1em;
font-size: 18px;
&.active{
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a{
padding: 10px;
display: inline-block;
}
&:hover{
#include transition(all .4s ease);
background: #fde8be;
}
}
}
Try by adding the following rules, height: 46px; to the .registration-menu and padding: 4px 0; to the .reg-menu-list
.registration-menu {
background: white none repeat scroll 0 0;
border-bottom: 4px solid green;
border-top: 4px solid green;
height: 46px;
}
.reg-menu-list {
color: green;
display: inline-block;
font-size: 0;
line-height: 0;
list-style: outside none none;
padding: 4px 0;
text-align: justify;
width: 100%;
}
A div is not allowed inside a list as a direct child. A modern and straightforward way to go is using flexbox positioning, e.g.
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
Example: http://codepen.io/anon/pen/dpbWJk?editors=0100
You don't need the div at all, use a pseudo-element
.registration-menu {
background: white;
border-top: 4px solid green;
border-bottom: 4px solid green;
}
.reg-menu-list {
list-style: none;
text-align: justify;
width: 100%;
line-height: 0em;
color: green;
font-size: 0px;
margin: 0;
padding: 0;
}
.reg-menu-list::after {
width: 100%;
line-height: 0em;
height: 0;
display: inline-block;
content: ' ';
}
li {
display: inline-block;
line-height: 1em;
font-size: 18px;
background: pink;
}
li.active {
background: #fde8be;
border-top: 4px solid #ffb642;
border-bottom: 4px solid #ffb642;
margin: -4px 0 -4px 0;
}
a {
padding: 10px;
display: inline-block;
}
a:hover {
#include transition(all .4s ease);
background: #fde8be;
}
<div class="registration-menu">
<ul class="reg-menu-list">
<li class="active">some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
<li>some
</li>
</ul>
</div>
remove display: inline-block from .reg-menu-list
I am trying to center my navigation. The CSS text-align: center; is not working. It doesn't seem to affect the nav in anyway, shape, or form.
here's my html:
<nav id="user_nav"><ul>
<li>Friends</li>
<li>Followers</li>
<li>Photos</li>
<li>Interests</li>
</ul></nav>
here's my CSS:
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
margin: 0 auto;
width: 100%;
}
#user_nav ul li {
list-style: none;
display: inline;
text-align: center;
}
#user_nav ul li a {
padding: 15px 25px 0 0;
font-size: 18px;
float: left;
}
Please note: I am trying to make the links centered horizontally as well as vertically.
If there is a better way to do it than how I am doing it now, I am open to suggestions.
Please help me.
Fiddle
CSS
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
margin: 0 auto;
width: 100%;
text-align: center;
}
#user_nav ul li {
list-style: none;
display: inline-block;
}
#user_nav ul li a {
vertical-align: middle;
padding: 15px 25px 0 0;
font-size: 18px;
display: block;
}
HTML
<nav id="user_nav"><ul>
<li>Friends</li>
<li>Followers</li>
<li>Photos</li>
<li>Interests</li>
</ul></nav>
You may be interested in this: Live demo (click).
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
width: 100%;
display: table;
}
#user_nav ul li {
list-style: none;
display: table-cell;
font-size: 18px;
}
If you use inline-block you'll need to space the elements out manually by setting the width: Live demo (click).
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
width: 100%;
}
#user_nav ul li {
list-style: none;
display: inline-block;
width: 24%;
font-size: 18px;
}
Trying to have my buttons centered above the text below. I think it has to do with my float lefts, but i believe i need to still float it left because the content afterwards is also floating.
Margin: 0 auto; isnt working.
Please Advise:
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
vertical-align: middle;
text-align: center;
font-size: 2rem;
display: block;
width: 150px; /* 150 / 980 */
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav a.button {
float: left;
margin: 0 auto;
}
nav a.button:not(:first-child) {
margin-left: 150px;
}
http://jsfiddle.net/117sparten/kNZEs/3/
Here you go.
<header>
<nav>
<div class="btngroup">
contact
blog
</div>
</nav>
</header>
.button {
background-color: rgb(214,52,49);
padding: 4px 24px;
border-radius: 40px 40px 40px 40px;
color: white;
text-decoration: none;
text-align: center;
font-size: 2rem;
display: inline-block;
width: 150px; /* 150 / 980 */
}
.button:not(:first-of-type) {
margin-left: 10px;
}
nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: green;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
nav div.btngroup {
width: 410px;
margin: auto;
height:
}
nav a.button {
float: left;
margin: 0 auto;
}
Try change nav a.button like this:
nav a.button {
display: inline-block;
margin: 0 auto;
}
or
nav a.button {
display: inline;
margin: 0 auto;
}
use this inline-block property in button class
.button
{
display:inline-block;
}
and remove float property from nav a.button