i want a navbar that mark for example on page index.html the navbar link with the text Home with a backgroud identical with the hover effect.
As follow my code..
CSS:
.header {
border-bottom: 6px solid black;
padding: 20px 10px 20px 10px;
background: #D11B1B;
position:fixed;
top:0;
left:0;
z-index:2000;
width: 100%;
height: 60px;
}
.nav ul a {
background-color: none!important;
padding: 20px 2px 20px 0px;
font-size: 40px;
}
.nav ul a:hover {
background-color: black!important;
border: 1px solid white;
padding: 40px 0px 0px 0px;
width: 100px;
}
HTML:
<header class="header">
<div class="nav">
<ul>
Home
Werbung
</ul>
</div>
</header>
Thx.
If you want to make a specific button/link in the navbar on each page, then you can specify give the button that links to the current page an "active" class.
<body>
<div class="nav">
Home
Home
Home
</div>
</body>
And then in your css, specify specific styles for ".nav a.hover" to make the active page look different on the navbar. You can add whatever styles you want, for example adding a bottom border, changing the color, or whatever you want to do.
.nav a.active{
color:red;
}
If you want to make the buttons change color when you hover the mouse over them, then use ".nav a:hover" and add whatever styles you want.
.nav a:hover {
color:dark-blue;
}
Related
I have a nav bar im making and I want to be able to either put the text in actual buttons or just increase the font size as it is now, i have tried to define it like this..
navbar {
font-size: 20px;
}
<nav class="navbar">
Prezi
</nav>
but it's not working for me and i don't know why
Try like this.
.navbar {
font-size: 20px;
padding: 10px;
}
.navbar a {
border: 2px solid transparent;
text-decoration: none;
color: white;
background-color: black;
padding: 10px 30px;
border-radius: 10px;
}
.navbar a:hover {
cursor: pointer;
border: 2px solid black;
background-color: white;
color: black;
}
<nav class="navbar">
Prezi
</nav>
To style a class you will have to put a dot in front of the name in your css file so instead of navbar you will get .navbar. For id's you have to put a # in front of it. The way you try to adress it now is as a default html tag. The tag is not navbar but nav so to let it work like you have now you have to change navbar {} to nav {}
I added new menu separators and now the alignment for my social media icons are all out of whack. I need them to be centered. Not sure why this happened or how it can be fixed. I tried adding some CSS but had no luck. My website is http://www.stephensengineering.com/stephens33/ any help is greatly appreciated! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
height: inherit;
/* margin: 0; REMOVE THIS*/
margin-bottom: 0; /* Suggested */
list-style-type: none;
text-align: right;
background-color: #000;
}
/* Suggested for aesthetic reasons */
#navbar {
background-color: #000;
}
#navbar ul li {
display: inline-block;
padding: 10px 4px;
height: inherit;
border-left: 1px #696969;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
border-left:1px solid #696969
/* background-color: #000; */
}
#navbar ul li:hover {
background-color: #000;
}
#navbar ul li:hover a {
color: #fff !important;
}
#navbar { background-color: #000; }
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:nth-child(3) a {
border-right: 1px solid #696969;
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 15px;
vertical-align: top;
}
.submit-btn {
background-color: green !important;
padding: .2em 1em;
border-left:1px dashed #696969
}
-->
</style>
</head>
<body>
<!-- -->
<div id="navbar">
<ul class="container">
<ul>
<li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></li><!-- --><li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></li><!-- --><li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></li><!-- --><li>project#stephensengineering.com</li><!-- --><li>888-300-0642</li><!-- --><li>Stephens University</li><!-- --><li class="submit-btn" >Submit Assignment</li>
</ul>
In order for the icons to appear centered, the distance between each border needs to be equidistant. The border is applied to the left edge of the padding of your anchor tag so there is 0.5em padding to the left of the icon, but your forgetting the padding around your list element which will add 4px between the icon and the subsequent border, resulting in 0.5em + 4px worth of padding to the right.
Check out your #navbar ul li and change the padding to padding: 10px 0px and you'll see it starts to adjust. This isn't the full solution, because I understand you want that padding for the next set of links in your navbar.
In your set up you need to account for the padding of the anchor tag, the padding of the list element, and the width of the of the border itself. It would be better to apply the border to the navbar ul li instead of the interior anchor element.
I am working on a navigation bar. I have a drop down effect working successfully in my test environment. It doesn't work on my target website (the menu "Archive" should show drop down effect).
Here's a URL to where it does not work properly.
http://quantsrecord.weebly.com/back-stage.html
Here is the markup that I am using, which does work in test, but not at the URL above.
<style type="text/css">
body {padding: 0; margin: 0;}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 147px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
</style>
</head>
<body>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Live
<li>News</li>
<li>Calculators</li>
<li>Knowledge</li>
<li>Archive
<ul>
<li>Jan 2017</li>
<li>Feb 2017</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
You have an overflow-y set, you need to remove it. Change this:
<div id="611390739829550513" style="width: 100%; overflow-y: hidden;" class="wcustomhtml" align="center">
To this:
<div id="611390739829550513" style="width: 100%;" class="wcustomhtml" align="center">
You can do like this:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">click here</a>
<ul class="dropdown-menu">
<li>sub Item 1</li>
<li><a tabindex="-1" href="#">sub Item 2</a></li>
</ul>
</li>
Teaching you how to troubleshoot
You can test / prove these things with your browser's developer tools. They are SUPER powerful and permit you to not only see the markup and CSS affecting any element, they also allow you to "play" with the styles so that you can see if different changes fix the problem. Here's one of many articles that might help you learn to troubleshoot: http://bigemployee.com/4-simple-techniques-to-quickly-debug-and-fix-your-css-code-in-almost-any-browser/
Explaining the problem
The problem is due to some markup that (presumably) Weebly adds to your site. The nav markup is wrapped in this element:
<div id="611390739829550513" style="width: 100%; overflow-y: hidden;" class="wcustomhtml" align="center"><!-- your nav here --></div>
Due to this element, which has the inline-style of overflow-y: hidden;, your drop-down does not show up (even though your styles make it display: block, it cannot show because it is below / outside the wrapper).
If you can find a way to modify that markup, or add a style to address that element and override the overflow-y: hidden, you will be able to make the element appear.
ONE THING that you could do potentially is get this in some styles:
div#611390739829550513 {
overflow-y: visible !important;
}
However, it would be preferable to remove the style from the element if possible.
Lastly, if you do this, you'll need to fix your navigation, because at narrower widths it "wraps" and the "Contact" menu item appears below the rest of the nav instead of inline.
My AIM: is to make a navigation bar go across the whole screen, with a greyish colour (#839496). And have each link/button to have a border to the left and the right of it. Just like the navigation bar on:
http://www.theberrics.com/dailyops
However,
My Problem is: the link/button is only going across as far as is goes. I want each button to go across with the width of 150px (which works fine). BUT also have the grey bar continue through the whole screen horizontally (which isnt working and just displays nothing).
Here is my css:
nav {
background-color: #839496;
padding: 0.02px 0;
margin-bottom: 10px;
}
nav ul {
width: 100%; /*RIGHT HERE: i would like the whole unordered list to go across the screen. But it doesnt work*/
position: relative;
left:10%;
margin: 0;
padding-left: 100px;
}
nav li {
float: left;
}
nav li a{
display: block;
width: 150px;
background-color: #839496;
color: #fff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 5px;
border-right: 1px solid;
border-left: 1px solid;
}
nav a:hover {
background-color: white;
color: #000;
text-decoration: underline;
}
And here is my html:
<nav>
<ul>
<li>Home<li>
<li>Top 10</li>
<li>Skaters</li>
<li>Submit</li>
</ul>
</nav>
Also: i dont want each button to be 25% of the page. Just 150px wide.
Sorry if my code or anything i said is confusing. Thank you for reading!
update your css like the below (i.e. include overflow: hidden; to nav
CSS
nav {
background-color: #839496;
margin-bottom: 10px;
overflow: hidden;
padding: 0.02px 0;
}
Been trying to learn about CSS and the use of hover psuedo classes over elements. Whenever I select a tab in the navigation bar, the background colour changes colour ( which is what I want). However, when I move off the anchor text the text changes back to white.
Ideally what I'm wanting is for the navigation tab to turn the background colour white, and the text black together simultaneously when the mouse hovers over. Here's the code:
<head>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="container">
<div id="title">
<h1>Record Store</h1>
</div>
<div id="navigation">
<ul class="navbar">
<li>Home
</li>
<li>Vinyl Stock
</li>
<li>Online Offers
</li>
<li>Collectors News
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
and CSS code:
* {
border: 0;
padding: 0;
margin:0;
}
#container {
margin: auto;
width: 800px;
border: 1px solid black;
min-height: 600px;
z-index: -9;
}
#title {
margin:auto;
/*border: 1px solid black;*/
height: 30%;
}
#navigation {
border-top: 1px solid black;
border-bottom: 1px solid black;
height: auto;
overflow: auto;
}
.navbar {
}
.navbar ul {
}
.navbar li {
font: bold 12px/1.2em Arial, Verdana, Helvetica;
height: auto;
list-style: none;
text-align: center;
width: 20%;
float:left;
background-color: blue;
padding: 1% 0px;
}
.navbar a {
border-right: 1px solid #1F5065;
color: white;
display: block;
text-decoration: none;
}
.navbar a:hover {
color: black;
}
.navbar li:hover {
background-color: white;
}
Can someone have a look and point out where I'm going wrong?
You just have to be more conscientious about defining your selectors. You're doing one thing when somebody hover over an li and something else when they hover over the a. What you want is to change both elements when hovering over a common element.
To solve the problem, remove:
.navbar a:hover {
color: black;
}
And replace it with:
.navbar li:hover a {
color: black;
}
jsFiddle
The first selector says "Get all a:hover's that are children in .navbar," The second selector says "Get all a's that are children in li:hover's that are children of .navbar."