I am creating a simple menu in CSS. The only "trick" is that I'd like diagonal left and right borders.
That's not really a problem though. Problem is that I need the first item of the menu to get a regular vertical border instead of a diagonal one.
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Tutorials</span></li>
<li><span>Snippets</span></li>
<li><span>Articles</span></li>
<li><span>Resources</span></li>
<li><span>Contact</span></li>
</ul>
</nav>
and the CSS:
nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 0 5px;
transition: all 0.3s;
}
nav a {
display: block;
color: #285064;
transition: all 0.3s;
}
nav a:hover {
color: #12242d;
}
nav span {
display: block;
}
#media all and (min-width: 690px) {
nav li {
margin: 0;
transform: skewX(-10deg);
}
nav a {
padding: 10px 20px;
color: #fff;
background-color: #285064;
}
nav a:hover {
color: #fff;
background-color: #12242d;
}
nav span {
transform: skewX(10deg);
}
}
Here is a JsFiddle of the current menu:
http://jsfiddle.net/mfL8509t/
Basically on that example, I'd need the "home" container to get a vertical regular border on the left hand side only.
How could I do that?
Thanks a lot!
Very easy, use first-child of
nav li:first-child {
transform: inherit;
}
Related
I cannot change 5th element in my menu. It should have blue background (it works) but I can't change the font color to white.
CSS
ul li:nth-child(5)
{
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul a:nth-child(5)
{
color: #FFF;
}
HTML
<nav>
<ul>
<li>Services</li>
<li>Pricing</li>
<li>Training</li>
<li>About</li>
<li>Login</li> <!-- This element should has other background and font -->
<li>01276 819291</li>
</ul>
</nav>
You can just reuse the same pseudo selector have already as the parent of the a element you want to affect.
ul li:nth-child(5) {
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul li:nth-child(5) a {
color: #fff;
}
I am guessing that the a is inside the 5th li child so your CSS shoud be like this:
ul li:nth-child(5) a {
color: #FFF;
}
The way you are matching for a matches for a hyperlink which is the 5th child of something. If you want to color all hyperlinks within the 5th item of an unsorted list, you want to match for ul li:nth-child(5) a:
ul li:nth-child(5) {
background-color: #006db6;
width: 100px;
margin: 0 auto;
border-radius: 5px;
}
ul li:nth-child(5) a {
color: #FFF;
}
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.
my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.my responsive menu is in side the adsense code here is the css of menu. I have an responsive website www.idealbanker.in but while clicking menu it goes in side the adsense ads kindly guide me to resolve it.
enter image description here
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {float: left;}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</script>
Solution
ul.topnav.responsive {
position:relative;
z-index: 10;
}
Add z-index property to specify the stack order.
I have this code: https://codepen.io/anon/pen/QdQEQW
As you can see, if you hover over "Dropdown" it also changes the background color of "V", the :after part. I do not want that. Simple. But I just can't get it done. I've googled and tried and tried but I just cant figure out how.
I've tried a bunch of different, variations, eg
.onclick-menu:hover.onclick-menu:after {
background: blue;
}
.onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover > onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover + onclick-menu:hover:after {
background: blue;
}
It seems to me that you want the following:
#top {
background: black;
line-height: 39px;
}
#top nav a {
color: #21262F;
padding: 10px 15px;
background: green;
}
#top nav a:hover {
background: red;
}
.onclick-menu {
position: relative;
display: inline-block;
}
.onclick-menu:after {
content: "V";
background: green;
margin-left: -4px;
padding: 8px 10px;
}
.onclick-menu:hover:after {
background: green;
}
.onclick-menu:focus {
outline: none;
pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.onclick-menu-content {
position: absolute;
z-index: 1;
background: #F4F4F4;
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
<div id="top">
<nav>
Hey
<div tabindex="0" class="onclick-menu">
Dropdown
<ul class="onclick-menu-content">
<li>Look, mom</li>
<li>no JavaScript!/li>
<li>Pretty nice, right?</li>
</ul>
</div>
Support
</nav>
</div>
For clarity's sake, this is the one:
.onclick-menu:hover:after {
background: green;
}
I don't understand why you added .onclick-menu twice in that selector in the first place. It's the pseudo element of the same item, so you don't need to repeat the parent.
I'm trying to get a website up and I'm using CSS to get it designed but I am unfamiliar with navbars and getting stuff side by side. I used a "float: left" for my image (logo) and well the text aligned but, it seems like I cannot fully click on the image anymore since it's also something that can be clicked using the tag. So, any ideas? My code:
CSS:
#navbar {
width: 100%;
height: 40px;
background-color: black;
opacity: 0.7;
display: fixed;
}
#navbar img {
opacity: 1;
float: left;
}
#navbar img:hover {
opacity: 0.7;
}
#navbar img a
{
margin: 0;
padding: 0;
}
#navbar ul
{
position: relative;
list-style-type:none;
margin:0;
padding: 8px 0 0 0;
color: white;
font-size: 1.5em;
}
#navbar ul a
{
display:block;
width:60px;
}
#navbar li
{
display:inline;
}
HTML:
<div id="navbar">
<img src="logo.png"/>
<ul> <li>Hello</li> <li>World</li>
</ul>
</div>
Hi Please see the below html and css
HTML:
<div id="navbar">
<ul>
<li><img src="logo.png"/></li>
<li>Hello World</li>
</ul>
</div>
CSS:
#navbar {
width: 100%;
height: 40px;
background-color: black;
opacity: 0.7;
}
#navbar img {
opacity: 1;
}
#navbar img:hover {
opacity: 0.7;
}
#navbar img a
{
margin: 0;
padding: 0;
}
#navbar ul li
{
list-style-type:none;
margin:0;
padding: 8px;
color: white;
font-size: 1.5em;
}
#navbar ul li
{
display:inline-block;
}
Please check the jsfiddle: http://jsfiddle.net/Luncqwn3/3/
I have cleaned up your html and css
I have placed the logo ,as well as the text in the ul li and given
display:inline-block which will make them appear next to each other
in a single line.
Please try using hexadecimal codes for color like #000 or #fff
instead of specifying white,black,green etc.
There is no such thing as display:fixed, please see w3schools
site for better understandong.
I removed float:left for the img tag , because i achieved
bringing the logo and text next to each pther using
display:inline-block for the ul li.