I'm not exactly sure if the navigation is properly written, but the issue does not always occur, it either occurs during initial website load or bit later on ones user browse few pages. The problem occurs with contents being positioned right, the content does not keep inline with the rest of the navigation and simply shifts down by about 6-10px to bottom.
HTML
<div class="nav">
<ul>
<li>ESGator Hosting</li>
<span class="right">
<li>Plans</li>
<li>Minecraft</li>
<li>About</li>
<li>Support</li>
<li><i class="icon-lock"></i> cPanel</li>
<li><i class="icon-envelope"></i> Mail</li>
<!-- not used <li><i class="icon-heart"></i></li> -->
</span>
</ul>
</div>
CSS
ul, ol, li {
font-size : 1em;
line-height : 1.6;
list-style : none;
}
.nav {
background : transparent;
width : 100%;
display : block;
position : fixed;
top : 0;
z-index : 100;
}
.add-bg {
background : #0a0a0a;
}
.static-bg {
background : #0a0a0a;
}
.nav ul {
width : auto;
max-width : 1024px;
min-width : 640px;
margin : 24px auto;
padding : 8px 0;
}
.nav li {
display : inline;
}
.nav a {
padding : 8px 0;
margin-left : 16px;
color : #7f848a;
font-size : 0.875em;
font-weight : 700;
text-transform : uppercase;
text-decoration : none;
transition : all 400ms;
text-align : left;
}
.nav a:hover, .nav a:focus {
color : #ffffff;
transition : all 400ms;
}
.nav a.active {
color : #ffffff;
}
.nav, .right {
float : right;
}
.nav a.brand {
color : #ffffff;
font-size : 0.875em;
font-weight : 700;
text-transform : uppercase;
text-decoration : none;
margin-left : 0;
transition : all 400ms;
}
.nav a.brand:hover, .nav a.brand:focus {
color : #f14f4f;
transition : all 400ms;
}
.nav a.button {
padding : 8px 10px;
background : #5aac6a;
color : #ffffff;
border-radius : 3px;
border-bottom : 2px solid #5a8a53;
transition : all 400ms;
}
.nav a.button:hover {
background : #6ca04d;
border-bottom : 2px solid #618f44;
color : #ffffff;
transition : all 400ms;
}
.nav a.button.feedback {
color : #f14f4f;
background : #eeeeee;
border-bottom-color : #d4d4d4;
}
.nav a.button.feedback:hover {
color : #f14f4f;
background : #dce0df;
border-bottom-color : #c4c8c7;
transition : all 400ms;
}
http://jsfiddle.net/f9cFP/
Alternatively you can refer to actual website to see what I mean here is a live page with footer and navigation being broken, esgator.com/mail
Maybe :
.nav, .right {
text-align: right;
}
instead of :
.nav, .right {
float : right;
}
Float create problems sometimes.
Related
My responsive page has a nav menu on top. But for mobile resolution I created a button that opens up a ul of that nav bar upon clicking. It should work given the code, but it does not appear. I have tried my best to make it work but nothing seems to work. I still do not use javascript and I don't want to for the time being. So I wish to make it work using only CSS.
I tried this method to transform a div. Which absolutely worked fine.
#check:checked ~ .uno {
But if I use this same method to show the ul (as below) upon clicking the invisible checkbox, it doesn't work.
#check:checked ~ #nav-list{(to make it display block from display none)
Here's the code of the whole thing.
nav {
background-color : #0e1317;
width : 100%;
position : absolute;
z-index : 2;
height : 300px;
}
nav .navbar {
display : flex;
justify-content : space-between;
width : 95%;
margin : auto;
background-color : #0e1317;
padding : 20px 0;
}
#nav-list {
font-size: 1.4rem;
font-weight: 500;
}
.uno, .duo {
position : absolute;
height : 2px;
right : 15px;
top : 35px;
width : 25px;
background-color : aliceblue;
transition : all 1s;
}
.duo {
top : 45px;
}
#check:checked~.duo {
rotate : -45deg;
transform : translate(5px, -5px);
}
#check:checked~.uno {
rotate: 45deg;
transform: translate(2px, 2px);
}
.visually-hidden {
width : 40px;
height : 40px;
position : absolute;
right : 6px;
top : 18px;
background-color : #090c0f;
opacity : 0;
z-index : 4;
}
#check:checked~#nav-list {
display : block;
position : absolute;
z-index : 9;
}
#nav-list li {
float : left;
list-style : none;
position : relative;
}
#nav-list li a {
padding : 0 20px;
display : block;
position : relative;
}
nav ul ul {
display : none;
list-style : none;
}
li:hover>ul {
width : fit-content;
position : absolute;
display : block;
color : #b98d69;
transition : 0.75s;
top : 0;
padding : 35px 0;
}
nav ul li a:hover {
color : #b98d69;
transition : 0.75s;
}
.sub-child li {
background-color : #090c0f;
width : 200px;
padding : 5px 0;
font-weight : 300;
}
.sub-child li a {
padding-top : 15px !important;
padding-bottom : 15px !important;
font-size : 1.3rem;
}
#media (min-width: 1000px) /* Swiper Content Container till 1000px*/
{
#hamcross {
display : none;
}
#check {
display : none;
}
}
#media (max-width: 1000px) and (min-width: 100px) /* Swiper Content Container below 1000px*/
{
.book-a-table {
display : none;
}
.uno,.duo {
position : absolute;
height : 2px;
right : 15px;
top : 35px;
width : 25px;
background-color : aliceblue;
transition : all 1s;
}
.duo {
top: 45px;
}
#check:checked~.duo {
rotate: -45deg;
transform : translate(5px, -5px);
}
#check:checked~.uno {
rotate: 45deg;
transform : translate(2px, 2px);
}
.visually-hidden {
width : 40px;
height : 40px;
position : absolute;
right : 6px;
top : 18px;
background-color : #090c0f;
opacity : 0;
z-index : 4;
}
#nav-list {
display : none;
}
#check:checked~#nav-list {
display : block;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<nav>
<div class="navbar">
<ul id="nav-list">
<li>
HOME:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>COFFEE HOUSE</li>
<li>RESTAURANT</li>
</ul>
</li>
<li>ABOUT</li>
<li>
MENU:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>MENU COFFEE</li>
<li>MENU RESTAURANT</li>
</ul>
</li>
<li>
PAGES:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>SERVICE</li>
<li>RESERVATION</li>
<li>HISTORY</li>
<li>OUR CHEFS</li>
<li>GALLERY</li>
<li>FAQS</li>
</ul>
</li>
<li>
BLOG:-<i class="fa-solid fa-angle-down ficont"></i>
<ul class="sub-child">
<li>BLOG GRID</li>
<li>BLOG STANDARD</li>
<li>BLOG SINGLE</li>
</ul>
</li>
<li>CONTACTS</li>
</ul>
<div id="hamcross">
<input type="checkbox" id="check" class="visually-hidden" />
<div class="uno"></div>
<div class="duo"></div>
</div>
</div>
</nav>
Pardon the long blocks of inefficient code. I am still learning, and would appreciate any help.
The reason your nav is not showing up is nav-list is a sibling to hamcross, hamcross is a parent to checkbox, uno and duo. Which means nav-list is like an uncle to checkbox, that is why #check:checked ~ #nav-list does not work. You need to have a hierarchy that you can traverse the dom with.
Check out this link for 10 examples css only!
I have set background color on hover, but it is showing on link as in pic: .
How can I properly align the background color around the link? I am using height and width, but it is changing position of link instead background color.
CSS for link:
.navbar-custom .navbar-nav > li > a {
color : #44546a ;
display: inline-block;
vertical-align : middle ;
margin-top : 20px ;
padding-bottom : 0px;
font-weight : bold ;
}
.navbar-custom .navbar-nav > li:hover > a {
background-color : #00a0b7 ;
color : white ;
height : ?????? ;
width : ??????? ;
}
With bootstrap you can just do that
.navbar-custom .navbar-nav > li > a {
color : #44546a ;
display: inline-block;
vertical-align : middle ;
font-weight : bold ;
}
.navbar-custom .navbar-nav > li:hover > a{
background-color : #00a0b7 ;
color : white ;
}
Example: https://jsfiddle.net/SeniorFront/DTcHh/30060/
try this with the content you needed
.navbar ul li {
color : #44546a ;
display: inline-block;
font-weight : bold ;
}
.navbar ul li a{
padding:5px;
}
.navbar ul li::after{
content:'|';
}
.navbar ul li a:hover{
background-color:#0095ff;
text-decoration:none;
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<ul>
<li><a>Home</a></li>
<li><a>Company</a></li>
</ul>
</div>
linkClass {color:red;}
linkClass:hover{color:blue;}
<a href='' class='linkClass'>Sample link</a>
<html>
<head>
<title> Playing with Cascading Style Sheets </title>
<style type = "text/css">
.nav { background-color : green;
height : 35px;
font-size : 25px;
font-weight : bold;
display : block;
}
.nav ul {
list-style : none;
margin : 0;
padding : 0;
display : inline;
}
.nav li {
display : inline;
padding : 100px;
vertical-align : middle;
}
.nav a {
text-decoration : none;
padding : 8px 8px 8px 8px;
color : white;
vertical-align : middle;
}
.nav a:hover
{
color : black;
background-color : white;
}
</style>
</head>
<body>
<div class = "nav">
<ul>
<li>Home</li>
<li>Links</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Query :- While using the background-color style on body tag at the style tag or by another way like using div tag the horizontal menu is not working as it works before without using the background color.
Problem with using background color is that after using it the horizontal menu context get outs of its div block of class= ".nav" when I shrink the browser size.
So I have been building this css navigation bar, I have a few problems hope someone can help
. This is how it is Navigation bar . But on setting the float property of the ".cssmenu ul li" to left the whole green background vanishes Navigation with float enabled . Why does this happen? Also I have used the :before pseudo class to create the underline extension effect but that doesn't seem to stretch to the whole width even I have set the width : 100% on hover.
Thanks in advance.
since "Links to jsfiddle.net must be accompanied by code "
.cssmenu{
width : auto;
background : #27ae60;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: block;
padding: 0;
}
things mess up on enabling the float property in .cssmenu ul li .
Parent elements of floated elements do not expand to their children's size. Think of this like the children were position: absolute.
To force the parent element to encompass all of its floated children, add overflow: hidden to the parent. In your case, you would add this to .cssmenu:
.cssmenu {
overflow: hidden;
}
JSFiddle
As for the underlining, setting the width of the :before element to 100% makes the underline the same width as the a element. This is the width of the text.
Instead, you should add the :before element to the li element:
.cssmenu ul li:before {
...
}
.cssmenu ul li:hover:before {
...
}
Now 100% width means the width of the li element, which is the "full" width of a menu item.
Note: You'll also have to change some metrics of the :before element such as top, left, etc.
JSFiddle
Use
.cssmenu {
overflow: hidden;
}
Demo here
Are you trying to inline the navigation elements? Wondering what you're trying to accomplish, that may help us better answer your question. I'm a little unclear, but here goes nothing!
Here's my shot:
http://jsfiddle.net/jasonbelmonti/CYR7V/
Is this what you're looking to achieve?
This is the css I used:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
.cssmenu{
width : auto;
background : #27ae60;
overflow: hidden;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: inline-block;
width: 33%;
padding-top: 15px;
padding-bottom: 17px;
}
.cssmenu ul li a{
display : block;
position : relative;
font-family: "Open Sans";
color : #fff;
text-decoration: none;
padding : 0 px;
text-transform: uppercase;
transition : all .3s;
font-size :14px;
}
.cssmenu ul li a span
{
padding-left: 15px;
}
.cssmenu ul li a:before{
content : ' ';
display : block;
height :3px;
width : 0px;
background : #2c3e50;
position : relative;
top : 30px;
left : -25px;
transition : all .3s;
}
.cssmenu ul li a:hover:before{
width : 100%;
left: 0;
}
.cssmenu ul li a:hover{
color : #34495e;
}
Edit Mission accomplished, thank you for your replies. If anyone can help me with the click to expand/fade to view feature, it would be very helpful. I'm currently looking into it.
I am working on a very simple navigation for my website. I can't figure out why the texts can't stick to the right. Here is an example: http://jsfiddle.net/E6ArK/
I also hope to add a click-to-expand and maybe a fade into view feature some time. Any help would be much appreciated.
HTML
<div class="navigation">
<ul>
<li>
<h1>Applications</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Forum</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Guilds</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
<li>
<h1>Imageboards</h1>
<ul>
<li>People</li>
<li>Random</li>
<li>Screen Shots</li>
<li>Wallpapers</li>
</ul>
</li>
<li>
<h1>Projects</h1>
<ul>
<li>Not Available</li>
<li>Not Available</li>
</ul>
</li>
</ul>
</div>
CSS
/* NAVIGATION */
/* Heading */
.navigation ul li h1 {
background : #000000;
color : #ffffff;
display : table;
font-weight : 100;
margin : 0;
padding : 6px;
border-right : 3px solid #ffffff;
font-size : 28px;
margin-bottom : 3px;
}
/* Positioning */
.navigation {
font-family :'Open Sans Condensed', sans-serif;
margin : 12px;
position : fixed;
right : 0;
top : 0;
}
.navigation ul {
font-size : 20px;
margin : 0;
padding : 0;
text-align : right;
}
.navigation ul li {
clear : right;
color : #ffffff;
float : right;
list-style-type : none;
}
/* Second Level */
.navigation ul li ul {
display : none;
}
.navigation ul li:hover ul {
display : block;
}
.navigation ul li ul li {
background : #000000;
border-right : 3px solid #ff0000;
color : #ffffff;
display : table;
font-size : 18px;
margin-bottom : 3px;
padding : 6px;
}
You need to float the heading to the right as well. Add float: right to your block of rules for .navigation ul li h1. That should keep them stuck to the right.
You simply need to add a float:right property to your heading styling:
/* Heading */
.navigation ul li h1 {
background : #000000;
color : #ffffff;
display : table;
font-weight : 100;
margin : 0;
padding : 6px;
border-right : 3px solid #ffffff;
font-size : 28px;
margin-bottom : 3px;
float: right;
}
Hope that helps