I know that there are other questions on StackOverflow about this but those solutions haven't worked out for me. I'm trying to create a responsive navbar with a cool icon. Midway, I tried to use a font awesome bar. I tried using the "Fas fa-bar" but it didn't work. Here's my code:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="check-btn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Aeotic</label>
<ul>
<li> <a class="active" href="#">Home</a> </li>
<li> About </li>
<li> Contact </li>
<li> Services </li>
<li> Feedback </li>
</ul>
</nav>
<style>
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
}
nav {
background: #0082e6;
height: 80px;
width: 100%;
}
label.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding-left: 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 3px;
}
a.active, a:hover {
background: #1b9bff;
transition: 0.5s;
}
</style>
</body>
</html>
Try running the code, the bar doesn't work properly.
Add "fa" before any kind of icon class you want to use from font-awesome, it works for me.
<i class="fa fas fa-bars"></i>
you use font awesome latest version v5.10.0
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
Related
I'm writing a simple code to design a plain header with a logo and navigation menu inside it. I want my logo to be on left and navigation menu to be on right side. It looks like a child problem but I am unable to resolve this issue.
I have tried to make all possible tweaking in my IDE as well as Chrome Inspection but couldn't figure it out.
My Index.html code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PSD to Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- body content -->
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<a href="#" class="logo">
<img src="img/logo.png" alt="logo" />
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- javascript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
and style.css is
header {
color: #fff;
height: 100px;
line-height: 100px;
}
header a.logo{
float: left;
margin-right:10px;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
I have a reset.css also
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1
{
font-size: 36px;
color: #555;
font-weight: bold;
}
h2
{
font-size: 30px;
color: #555;
font-weight: bold;
}
h3
{
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary{
color: #e74c3c;
}
.primary-bg{
background-color: #e74c3c;
}
.secondary-dark-blue
{
color: #34495e;
}
.secondary-dark-blue-bg
{
background-color: #34495e;
}
.secondary-sky-blue
{
color: #2d82d8;
}
.secondary-sky-blue-bg
{
background-color: #2d82d8;
}
ul{
list-style: none;
}
ul li {
display: inline-block;
}
I am expecting the nav menu to float on right but it is not working.
You don't have a menu class defined. Are you trying to use nav if so it should be
nav {float:right;}
I can see in your code that you are defining class .menu in your css but you are not using it anywhere in your html.
And you can do it in better way by using flexbox.
.row{
display: flex;
justify-content: between;
}
It not that much heard as i have review your code you have to add simple one class to your nav tag and that is nav class="pull-right" use class pull-right, it is default bootstrap class.
I am here to answer my own question. I found this piece of code in default bootstrap file
.row {
display: flex;}
I changed it to display:block and it is solved.
I respect all the answers but if you using Bootstrap 4 just give ml-auto class to nav it will solve the issue.
You must use col-md-12 inside the row. I have used flex property for nav and margin-left:auto to align the menu right side.
Optionally you can use floating method with clearfix to align the menu right side.
* {
box-sizing: border-box;
position: relative;
}
header {
color: #fff;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header a.logo {
display: inline-block;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
/** second css **/
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1 {
font-size: 36px;
color: #555;
font-weight: bold;
}
h2 {
font-size: 30px;
color: #555;
font-weight: bold;
}
h3 {
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary {
color: #e74c3c;
}
.primary-bg {
background-color: #e74c3c;
}
.secondary-dark-blue {
color: #34495e;
}
.secondary-dark-blue-bg {
background-color: #34495e;
}
.secondary-sky-blue {
color: #2d82d8;
}
.secondary-sky-blue-bg {
background-color: #2d82d8;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
.nav-wrapper {
margin-left: auto;
}
nav {
display: flex !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav>
<a href="#" class="logo">
<img src="https://via.placeholder.com/250x150" alt="logo" />
</a>
<div class="nav-wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
Either
.row {
display: block;
justify-content: between;
}
in your reset.css or style.css
or
<nav class="ml-auto">
in your index.html will work fine.
I have a navigation bar inside a few pages. It's repeated code for now.
I just want to get it up and working.
On my home page, it shows up bolded and slightly larger.
On my about page, it shows up slightly less bolded and slightly smaller.
I'm just confused as to why, they have the exact same code (copy pasted) except the href a tags are modified (urls are different).
Here is the html kind of summarized:
<body>
<Header>
<img src="img/header.gif" alt="Dental Dynamics Logo Header" class="header_logo">
</Header>
<nav>
<div class="toggle-nav">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Doctors
</li>
<li>
Office Tour
</li>
<li>
Sterilization Infection Control
</li>
<li>
Technology
</li>
<li>
Bleaching
</li>
<li>
Photos
</li>
<li>
Map
</li>
<li>
Post Op
</li>
<li>
Forms
</li>
<li>
Insurance/Payment
</li>
<li>
Just For Fun
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(() => {
$('.menu').click(() => {
$('ul').toggleClass('active');
})
})
</script>
This is the CSS to go along with it:
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url("./../img/dental_background.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.header_logo {
position: relative;
top: 0;
right: 0;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
margin: 0 auto;
padding: 0;
}
nav ul li {
display: inline-block;
list-style: none;
}
nav ul li a {
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
font-size: 62.5%;
color: #0000e0;
display: block;
padding: 1.5em;
}
nav ul li a:hover,
nav ul li a:focus {
font-size: 70%;
color: blueviolet;
background: rgba(177, 173, 173, 0.3);
}
.toggle-nav {
width: 100%;
padding: 0.5% 1.1%;
text-align: left;
box-sizing: border-box;
font-size: 150%;
color: #0000e0;
display: none;
}
#media (max-width: 768px) {
.toggle-nav {
display: block;
}
nav ul {
width: 100%;
display: block;
}
nav ul li {
display: block;
text-align: center;
}
.active {
display: none;
}
}
Any ideas as to why this is happening?
I have a header with an image tag but the size of that is remaining the same.
This is all just a bunch of HTML and CSS.
No javascript (besides the JQuery happening within the HTML file, not a fan of jquery but oh well :D )
---------------------------------- EDIT ----------------------------------
Top pic is the home page nav bar, bottom is the about page nav bar.
It may be worth noting that the toggle-nav portion is related to the link
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> in the head?
In fact, here is the head from the about page which is identical to the home page except for the Title tag.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>About Us!</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
i tried to make a top nav bar. why my version is different from the w3s version, I cant find my mistake.
this is the css code and the html code
.logo {
padding-right: 30px;
color: #ffffff;
}
.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #a80664;
border-color: transparent;
background-color: #a80664;
}
.topnav-menu {
float: left;
}
.topnav-menu a {
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav-menu a:hover:not(.active) {
background-color: #ff0094;
}
.topnav-menu a.active {
{
color: #a80664;
background-color: #f3f3f3;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP CSS STYLESHEET LINK -->
<!-- MY CUSTOM CSS -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title></title>
</head>
<body bgcolor="#000000">
<li>
<div class="logo"><a>LOGO</a></div>
</li>
<ul class="topnav-menu">
<li><a class="active" href="#Home">HOME</a></li>
<li>KATEGORI</li>
</ul>
</body>
</html>
With those code I can't make a top nav bar like this
this is what i want
what kind of mistake did i do?
You have to put your logo before tag and you have to wrap in
and you have to wrap your all code in side
<nav>
<div class="logo">
<img src="imagepath">
</div>
<div class="wrapper">
<ul>
<li>Home</li>`enter code here`
**strong text**<li>About</li>
</ul>
</div>
</nav>
I'm trying to make an off-canvas menu, but encountered a problem.
Only the two first menu links are showing with the grey-black background but I want all of the menu links to have it. The remaining 5 menu links are indeed inside the menu (as you can see when you hover on the links), but they are with a transparent background.
I put the html and css codes into a Jsfiddle: https://jsfiddle.net/ghbx6fmn
P.S. The codes seem to be working fine on Jsfiddle, but on my website it doesn't...
/*===== SLIDE MENU ======*/
/*---------- HIDE SELECT CHECKBOX ----------*/
.toggle,
.full-screen-close
{
display: none;
}
.full-screen-close
{
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
top:0;
left:0;
}
/*---------- TOGGLE OFF-CANVAS MENU ----------*/
.toggle:checked + .container > .menu-container
{
margin-left: 70%;
}
.toggle:checked + .container > .content .full-screen-close
{
display: block;
background: rgba(0,0,0,.5);
}
.menu
{
padding-top: 24px;
}
.toggle-btn,
.close-btn
{
cursor: pointer;
}
.toggle-btn
{
font-size: 2.25rem;
}
.close-btn
{
float: right;
font-size: 1.5rem;
padding: 1.5rem;
color: #ededed;
}
.menu-container,
.content
{
transition: margin 0.5s ease-in-out;
}
.menu-container
{
background: #2c3e50;
width: 40%;
margin-left: 100%;
float: right;
height: 100%;
position: absolute;
z-index:99;
}
.slide-menu i
{
margin-right: 1rem;
font-size: 1.5rem;
vertical-align: middle;
}
.slide-menu li a
{
color: #fff;
padding: 1.5rem;
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 600;
display: block;
transition: background-color .5s ease-in-out;
}
.slide-menu li a:hover
{
background-color: #34495e;
}
/*===== MEDIA QUERIES ======*/
#media (max-width: 460px) {
.slide-menu li a
{
font-size: 0.875rem;
padding-left: 12px;
}
.slide-menu li i
{
font-size: 16px;
}
}
#media (max-width: 320px){
.slide-menu li i
{
display: none;
}
}
<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Off-canvas navigation menu Tutorial" />
<meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
<meta name="author" content="AcasA Programming" />
<link rel="icon" href="../../favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/right-slide.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<body>
<input type="checkbox" id="offcanvas-menu" class="toggle" />
<div class="container">
<aside class="menu-container">
<div class="menu-heading clearfix">
<label for="offcanvas-menu" class="close-btn">
<i class="fa fa-times"></i>
</label>
</div><!--end menu-heading-->
<nav class="slide-menu">
<ul>
<li><i class="fa fa-home"></i>Testing 1</li>
<li><i class="fa fa-star"></i>Testing 2</li>
<li><i class="fa fa-folder-open"></i>Testing 3</li>
<li><i class="fa fa-cogs"></i>Testing 4</li>
<li><i class="fa fa-star"></i>Testing 5</li>
<li><i class="fa fa-folder-open"></i>Testing 6</li>
<li><i class="fa fa-cogs"></i>Testing 7</li>
</ul>
</nav><!--end slide-menu -->
</aside><!--end menu-container-->
<section class="content">
<label for="offcanvas-menu" class="full-screen-close"></label>
<div class="menu right">
<label for="offcanvas-menu" class="toggle-btn">
<i class="fa fa-bars"></i>
</label>
</div><!--end menu-->
<div class="menu-options clearfix">
<div class="right">
</div>
</div>
<div class="content-body">
</div><!--end content body-->
</section><!--end content-->
</div> <!--end container -->
</body>
</html>
Note: I'm not thrilled with the structure of your HTML/CSS and think it could use a refactor. My answer will address the issues you're having, but you should aim to simplify your code further.
Problem 1: Your menu won't increase the height of the gray background, because the menu is an absolutely positioned element, and hence outside of the document flow.
The easiest way to ensure the gray background fills the entire viewport is this:
.full-screen-close {
...
p̶o̶s̶i̶t̶i̶o̶n̶:̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶;̶
position: fixed;
}
Problem 2: Now that we've fixed the first issue, we see the blue background behind the menu doesn't extend all the way.
No problem. Let's just remove the height property.
.menu-container {
...
h̶e̶i̶g̶h̶t̶:̶ ̶1̶0̶0̶%̶;̶
}
Now, .menu-container is as tall as it needs to be, not 100% of the parent's height.
Have a look: https://jsfiddle.net/ghbx6fmn/2/
This is my code but the things which i wanna put inside the button are not coming inside it and it is coming outside the button. Any help would be highly apprecieated. This is the pic of what is happening
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
.dropbtn {
background-color: #d90000;
color: "white";
padding: 16px;
border; #ffffff
cursor: pointer;
}
.dropdown { position: relative;
display; inline-block;
}
.dropdown content { diplay: none;
position: absolute;
bacground-color:#f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,0.2);
}
.dropdown-content a { color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #b30000}
.dropdown:hover .dropbtn {display: block;
}
.dropdown:hover .dropbtn { background-color:#3e8e41;
}
</head>
<body>
<div class="well well-sm">
<h2>Quick Travel</h2>
<div class="dropdown">
<button class="dropbtn">Tutorials </button>
<div class="dropdown-content">
begginer
Advance
Specials
</div>
</div>
</div>
</body>
</html>
Try this :
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Tutorials </button>
<ul class="dropdown-menu">
<li>begginer</li>
<li>Advance</li>
<li>Specials</li>
</ul>
</div>