I'm a beginner when it comes to html and css, I have to make a website as a school project. I want to add the search bar in the navbar using css, I'v been searching but I couldn't find the answer.
Here's my code:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#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 a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
</ul>
<div>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#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 a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
<li>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</li>
</ul>
<div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I have 1 side menu in my main page of website. And some of the list have have sub menu. And on hover i want to display it. Firstly i am display it none and then on display it on hover but it is not displaying.
#menu {
width: 15%;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
position: absolute;
left:100%
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li>Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li>Salary</li>
<li>Change Password</li>
</ul>
</div>
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li class="submenu">Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
Also Add .submenu class to submenu dropdown parent li.
I need to display sub-sub-menu on hover of my sub-menu. So far I did code to display menu -> sub-menu on menu click, but to proceed I want a functionality to display sub-sub-menu on hover of my sub-menu. Can somebody help me to achieve the same?
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
// $(this).find('div.subsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
float: left;
width: 600px;
height: 30px;
background: black;
margin-top: 10px;
position: relative;
font-size: 15px;
margin-left: 30px
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
color: red;
text-decoration: none;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
color: #00537F;
width: 600px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul.submenu a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topnav">
<ul>sds
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
Try the following snippet without using jquery or javascript, you can get it done using only css. And have updated according to your question
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #000000;
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
line-height: 35px;
color: #fff;
}
#nav li li a {
font-size: 80%;
}
#nav li:hover {
background: #ff0000;
}
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
}
#nav li:hover ul ul {
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li li:hover ul {
display: block;
margin-left: 200px;
margin-top: -35px;
}
<div id="topnav">
<ul id="nav">
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data ⇒
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
you can try this
#menu {
background: #343434;
color: #eee;
height: 35px;
border-bottom: 4px solid #eeeded
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 -1px 0 #000;
border-right: 1px solid #444;
border-left: 1px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #eee;
}
#menu li:hover > a,
#menu li a:hover {
background: #111
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: 180px;
background: #111;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu ul.menus a:hover {
background: #333;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 180px;
background: #111;
top: 0;
width: 180px;
}
#menu ul.menus .submenu li {
background: #111;
}
#menu ul.menus .has-submenu:hover .submenu {
display: block;
}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
</ul>
</nav>
I have a menu, and I would like to have the last 3 options (some images for Facebook/Twiter/Gmail) to be aligned to the right. So far I tried:
li:last-child { float:right;}- combine the 3 images in one to have the last option to the right, but not even so works
float: right; - the same result as above
text-align: right; - no change
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 225px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Read</li><li>
Contact</li><li>
About Us</li><li id="alignright">
FB
</li><li>
Twitter
</li><li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
Flexbox can do that:
JSfiddle Demo
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
height: 100px;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
display: flex;
align-items: center;
}
#nav ul li {} #nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a {
color: white;
display: block;
padding: .5em;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 10;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#alignright {
margin-left: auto;
}
<div id="nav">
<div id="wrap">
<ul>
<li>Home
</li>
<li>
Study
</li>
<li>
Games
<ul>
<li>Riddles
</li>
<li>
Flip card game
</li>
<li>
Spot the mistake
</li>
<li>
Multiple choice
</li>
</ul>
</li>
<li>
Read
</li>
<li>
Contact
</li>
<li>
About Us
</li>
<li id="alignright">
FB
</li>
<li>
Twitter
</li>
<li style="text-align: right;">
Gmail
</li>
</ul>
</div>
</div>
First of all:
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
i have a menu i'm developing at this link:
http://events.discoverportland.net/
The menu should load to a blue square just to the right of the discover portland logo. There are serveral nested ul's in the menu, the problem i'm having is getting them to load to the side of the menus above them As it load now, you can't get to the teritairy links unless you move VERY fast.
Is there any way to get the uls to load inline as i'm hovering over them, or is there a better solution?
this my nav html:
<nav>
<div class="clearfix hd8 suckerfish" >
<ul id="md">
<li>Home2</li>
<li>Neighborhoods
<ul>
<li>Northwest
<ul>
<li>Pearl District</li>
<li>Oldtown-Chinatown </li>
<li>Nob Hill</li>
</ul>
</li>
<li>Southwest
<ul>
<li>West End</li>
<li>Riverplace-South Waterfront</li>
<li>Downtown</li>
</ul>
</li>
<li>Southeast
<ul>
<li>Sellwood-Westmoreland</li>
<li>Hawthorne</li>
<li>Clinton-Division</li>
</ul>
</li>
<li>Northeast
<ul>
<li>Alberta</li>
<li>Lloyd District</li>
<li>Hollywood District</li>
</ul>
</li>
<li>North
<ul>
<li>Mississippi</li>
<li>Williams</li>
<li>St. Johns</li>
</ul>
</li>
</ul>
</li>
<li>Itineraries</li>
<li>Day Trips</li>
<li>Food+Drink
<ul>
<li>Dining Picks</li>
<li>Food Cart Fare </li>
<li>Beer, Wine & Spirits</li>
<li>Café Culture</li>
</ul>
</li>
<li>To Do
<ul>
<li>Shopping</li>
<li>Recreation</li>
<li>Culture
<ul>
<li>Galleries</li>
</ul>
</li>
<li>Family</li>
</ul>
</li>
<li>Events</li>
</ul>
</nav>
this is the css i'm using:
nav ul ul li a::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 8px;
}
nav {
text-transform:uppercase;
font-family: Oswald,Arial,Helvetica,sans-serif !important;
font-size: 14px;
font-weight: 100 !important;
letter-spacing: 1px!important;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FF0066;
padding: 2px 0 0 64px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #FF0066;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 20px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #FF0066; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 25px;
color: #fff;
font-family: 'Fira Sans', sans-serif;Important;
font-size: 12px;
}
nav ul ul li a:hover {
background: #AD0548;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul ul li {
width: 275px !important;
}
#media (max-width: 767px) {
#logo a {
background: rgba(0, 0, 0, 0) url("http://discoverportland.net/templates/urbanlife/images/logos/DP_HeadingLogo2.png") no-repeat scroll 0 0 / 100% auto;
height: 60px;
margin: 0 !important;
width: 60px !important;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover #md {
display: inline-block;
}
}
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!