I am adding a responsive navigation bar to a website, closely based on a w3 school tutorial (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp).
All is working fine, except that I am trying to center the menu links on the page (for the desktop version), instead of having it on the left side like the tutorial explains.
I tried modifying the value of each property, including float, but without success so far. It must be extremely simple, but what am I missing?
html:
<div class="nav" id="nav">
Home
About
Menu
Drinks
Values
Gallery
Booking
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
css:
.nav {
background-color: gold;
overflow: hidden;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: pink;
color: green;
}
.nav .icon {
display: none;
}
I saw that this question has already been asked with bootstrap, but as a beginner, I am only using plain css here.
you can use flex with center layout, give it a try
.topnav {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #333;
}
Another approach if you wanted to avoid using flexbox for whatever reason would be to set the menu items to display: inline-block instead of using floating. Then a simple text-align: center on the nav wrapper will be sufficient.
On a side note, it would make more sense semantically to use the <nav> element as a wrapper and put the menu items in a <ul> list as <li> elements.
.nav {
background-color: gold;
overflow: hidden;
text-align: center;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: pink;
color: green;
}
.nav .icon {
display: none;
}
<div class="nav" id="nav">
Home
About
Menu
Drinks
Values
Gallery
Booking
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Related
So, I just started learning html from w3school. And I have started my little project which I am going to create simple website. And now I am stuck with creating drop down menu from my navigation bar. I can't seem to put it in the navigation bar. ps.I have edited some code I don't think it's relevant.
.topnav {
overflow: hidden;
padding-top: 6px;
padding-bottom: 6px;
margin: 0px;
}
.topnav h1 {
text-align: center;
font-size: 22px;
color: #FFFFFF;
margin: 0px;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.show {
display:block;
}
</style>
</head>
<body>
<div class="topnav">
<h1>Home</h1>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
Content
</div>
</div>
</div>
Add below css and jQuery
css::
#myDropdown{
display: none;
}
jQuery::
$('.dropbtn').click(function(){
$(this).next('#myDropdown').stop(true,false).slideToggle();
})
You have to use script for hide/show your dropdown menu, Here you can see script
http://jsfiddle.net/renukaSingh/njhwr4z2/
I have a menu made up of 5 links. I need each link to be 33% of the available width with spacing between the links. The horizontal and vertical spacing must be the same.
Links must be the same height as the tallest link in there row, even though the length of the link text will vary per link. Ideally all links would be the same height but I doubt this is possible.
The link text is dynamic and will change. This for a responsive website so the page width will vary.
I cant change the HTML at all.
This is for a mobile only website so I dont need to worry about older browsers. I should be fine to use flexbox.
<ul>
<li>
<a href="#">
<span>Link 1</span>
</a>
</li>
<li>
<a href="#">
<span>Link 2 has much longer text than the other links</span>
</a>
</li>
<li>
<a href="#">
<span>Link 3</span>
</a>
</li>
<li>
<a href="#">
<span>Link 4</span>
</a>
</li>
<li>
<a href="#">
<span>Link 5</span>
</a>
</li>
</ul>
My code below works fine in Chrome. The only thing I still need to do is vertically center the link text (see the image below).
The align-items: center property looked promising however If I apply it to the ul then the lis' stop being the same height.
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
width: 50%;
border: 2px solid black;
margin: auto;
}
li {
list-style-type: none;
float: left;
width: 32%;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
vertical-align: middle;
}
li:nth-of-type(2),
li:nth-of-type(5)
{
margin-left: 2%;
margin-right: 2%;
}
a {
display: inline-block;
margin: -10em;
padding: 10em;
}
a {
background: gold;
}
a:hover {
background: green;
}
http://codepen.io/anon/pen/CeiqK
I don't know if this solution that I post here will be valid for you. Anyway, I changed your css a bit to get it:
ul {
margin: 0;
padding: 0;
width: 50%;
border: 2px solid black;
margin: 0 auto;
font-size: 0; /* this fix inline-block margins */
}
li {
font-size: 14px;
list-style-type: none;
display: inline-block;
width: 32%;
min-height: 34px;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
}
a {
display: table-cell;
width: 100em;
height: 34px;
vertical-align: middle;
}
Check it at codepen
Creates this:
I am trying to middle align icons inside a circle. I am using icon fonts by font-awesome. My code is as follows
<ul>
<li><i class="icon-5x icon-camera"></i></li>
<li><i class="icon-5x icon-camera"></i></li>
<li><i class="icon-5x icon-camera"></i></li>
</ul>
CSS
ul {
list-style: none;
}
ul li {
display: inline-block;
margin: 15px;
height: 100px;
width: 100px;
border-radius: 50%;
}
ul li a {
font-size: 1em;
color: #000;
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
and also I tried
a {
line-height: 100%;
text-align: center;
}
But these approaches does not work.
Your solution is valid, you just need to move the width and height declarations into the a:
ul {
list-style: none;
li {
display: inline-block;
background-color: pink;
margin: 15px;
border-radius: 50%;
a {
color: #000;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
width: 100px;
&, &:hover, &:active {
text-decoration: none;
}
}
}
}
Result:
You can do this with flexbox quite easily. That is my go to and then fallback to the above solution for browsers that don't support flexbox. Flexbox support is awesome these days especially with IE 8 9 & 10 going away.
The trick is to use justify-content: center to align the icon center in the circle and use align-items: center to vertically align the icon in the circle.
Check out this great resource on flexbox. See here for an example pen http://codepen.io/celsowhite/pen/pgVegE.
The HTML:
<ul class="social_links">
<li><a href="" target="_blank">
<i class="fa fa-envelope"></i>
</a></li>
<li><a href="" target="_blank">
<i class="fa fa-twitter"></i>
</a></li>
<li><a href="" target="_blank">
<i class="fa fa-facebook"></i>
</a></li>
</ul>
The SCSS:
ul.social_links {
display: block;
padding: 20px 0px 0px;
li {
display: inline-block;
font-size: 23px;
padding: 0px 10px;
}
}
ul.social_links i {
background: black;
border-radius: 50%;
width: 50px;
height: 50px;
color: #fff;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all .5s ease-in-out;
&:hover{
background: #555555;
}
}
Use line-height property, that's best, I had same problem I used line-height and it's done.
Example
height:20px;
width:20px;
line-height:20px;
good to go
Example of list :
<ul class="list-unstyled list-coordonne">
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
</ul>
CSS code to center icon in circle :
.footer-text .fa-coordonne {
color: white;
background-color: #dad918;
border-radius: 50%;
font-size: 25px;
width: 40px;
height: 40px;
text-align: center;
}
.footer-text .list-coordonne>li:first-child .fa-coordonne:before{
content: '\f041';
text-align: center;
font-weight: 600;
vertical-align: sub;
z-index: 12;
}
.footer-text .list-coordonne>li:nth-child(2) .fa-coordonne:before{
content: '\f003';
text-align: center;
font-weight: 600;
vertical-align: sub;
z-index: 12;
}
.footer-text .list-coordonne>li:last-child .fa-coordonne:before{
content: '\f095';
text-align: center;
font-weight: 600;
vertical-align: -webkit-baseline-middle;
z-index: 12;
}
What I simply like to do is first set the height and width of the icon. Plop it in a div. Apply border radius of 50%(to get a circle) to the div. And give it a background-color(obviously). Set the display property of the div to "flex". justify-content: center and align-items: center. And there you go! Works out for me!
add this padding in 'li'
li{
padding:10px; //or anyvalue
}
or use specific padding
li{
padding-top:10px; //or any value
}
remember when you add padding value then the size would also increases, adjust and balance them.
I have this HTML Code
<a href="test.html">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
and this is the css
.menubox {
height: 150px;
width: 100%;
font-size: 14px;
color: #777;
margin: 0 0 0 0;
padding: 0;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;}
.mcolor1 { background: #3A89BF url(../images/prod2.png) no-repeat center center; }
on mouse hover this div, the text shows the hyperlink line, how can I hide it?
As others have suggested, it's easy to remove the underline from links. However, if you need to target just this specific link, try giving it a class. Example:
.no-underline:hover {
text-decoration: none;
}
<a href="test.html" class="no-underline">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
If you want to remove the underline on hover, use this CSS:
a:hover {
text-decoration: none;
}
Note :
Unless your page uses the HTML5 doctype (<!doctype html>), your HTML structure is invalid. Divs can't be nested inside a element before HMTL5.
With the HTML as it stands, you can’t hide the link underline just for this link.
The following CSS will remove the underline for all links:
a:hover {
text-decoration: none;
}
To remove it for just this link, you could move the link inside the <div>:
.menubox > a {
display: block;
height: 100%;
}
.menubox > a:hover {
text-decoration: none;
}
<div class="menubox mcolor1">
<a href="test.html">
<h3>go to test page</h3>
</a>
</div>
Should look like this:
(source: gyazo.com)
My attempt
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
I use Current class for the current page background.
Added the header
.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}
Floated menu to right, made it display inline and centered the text
.menu {
float: right;
padding: 2.7%;
}
.menu a{
color: #1e1e1e;
}
.menu a:hover{
color: #5e5e5e;
}
.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}
Now the part of the current background
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}
Result:
(source: gyazo.com)
Can you see theres a big space between the current and other items? How do I remove this? make it equal to others spaces.
Things I tried:
Adding position relative
result:
Menu item 'current' goes over the menu item 'forums'
I could not find any other way to do so, what am I doing wrong?
Try the following HTML:
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
With the following amends to your CSS:
.menu {
float: right;
padding: 2.7%;
}
.menu li {
float: left;
margin-left: 10px;
}
.menu a{
color: #1e1e1e;
display: block;
padding-left: 20px;
padding-top: 5px;
}
.menu a:hover{
color: #5e5e5e;
}
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
color: white;
}
Your HTML was structured incorrectly ... you shouldn't be placing the <li> elements inside the anchor elements.
You also don't need to have display: inline; on the list items, as they are floated left anyway, they should already be inline.
In future, you may want to check that your HTML is valid using the W3C validator, it should explain any errors in your HTML and how you can fix them.
Let me know if the above doesn't fix it and I'll happily have another look.
EDIT: Forgot to also state that I removed the height and width on the current css declaration, that was unnecessary, and almost definitely causing the spacing issues.
Remove the width on .current. That is what's adding the extra spacing.
If you don't want to change that, change the spacing on the the adjacent li:
.current + li {
padding-left: 0;
}
Here is a simplified demo of what you are trying to accomplish. Learn from it:
HTML
<ul>
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
CSS
ul {
float: right;
}
li {
display: inline;
padding: 10px;
}
.current {
background-image: url('http://placekitten.com/200/200');
}
Demo