How to develop nav bar in CSS - html

Hi I am trying to develop navigation bar in CSS. I am very new to CSS but I tried some way in my react/type script application. Below is my expectation.
In the above image, left side project name and right side company logo. In between I need dropdown which has two options. I tried as below.
public render() {
return (
<div id="header">
<div style={{ overflow: "hidden", backgroundColor: "#f1f1f1", padding:"20px 10px" }}>
</div>
</div >
);
}
Which simply display small image with grey color. I am really trying hard to get this done. Can someone help me how can I write CSS and HTML for this. Thanks

If you need CSS + HTML implementation you can have a look at bootstrap Navbar for this. Bootstrap Navbar
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Your Logo</li>
</ul>
</div>
</nav>
</body>
</html>

Related

why is nav icon not showing?

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Own Css -->
<link rel="stylesheet" href="css/style.css">
<title>Tropico</title>
</head>
<body>
<!-- Section - 1 Navigation Starts -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<img src="img/logo.png" alt=""><span>Tropico</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Fruits
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact us
</li>
<button class="nav-item">Get a quote</button>
</ul>
</div>
</div>
</nav>
<!-- Section - 1 Navigation End -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5.
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
Nav icon not showing when display goes below 992px as i used navbar-expand-lg in bootstrap5
maybe your source in img tag is wrong
if you have img folder in your root path (based on src="img/logo.png") change it to <img src="/img/logo.png" alt="">
If not worked see html file paths
Since you are using Bootstrap 5.0.2, you got to do the following modification:
Add .navbar-light in <nav> to have the nav burger menu icon displayed. It's because the selector in Bootstrap to display the image is .navbar-light .navbar-toggler-icon so without .navbar-light it won't be displayed.
Spotted another issue with the interaction with this toggle icon. You'll need to do the following modifications as well:
Modify data-toggle="collapse" to data-bs-toggle="collapse"
Modify data-target="#navmenu" to data-bs-target="#navmenu"
FYI data-target was the previous annotation used in Bootstrap v4. Now, in Bootstrap v5, every data-* has been changed to data-bs-*
Don't forget to use aria-* as mentioned in Bootstrap documentation as well for accessibility :)
You have some BS missing classes
try this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Own Css -->
<link rel="stylesheet" href="css/style.css">
<title>Tropico</title>
</head>
<body>
<!-- Section - 1 Navigation Starts -->
<nav class="navbar navbar-expand-sm navbar-light navbar-expand-lg">
<div class="container">
<img src="https://i.imgur.com/vhbkAUt.png" width="40" alt=""><span>Tropico</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Fruits
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Contact us
</li>
<button class="nav-item">Get a quote</button>
</ul>
</div>
</div>
</nav>
<!-- Section - 1 Navigation End -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>

buttons resizing on site with Bootstrap

I have been working on a site using the Download ready-to-use compiled code for Bootstrap v4.1.3 provided on the bootstrap page, and after reading how to work on the nav and the buttons I have stumbled into a problem.
below of my meta tags I have the css links
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="addons/css/bootstrap.min.css">
<link rel="stylesheet" href="addons/css/core-style.css">
<link rel="stylesheet" href="addons/css/menustyle.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-info fixed-top">
<a class="navbar-brand" href="#">
<img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top">
Bootstrap</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Facultad</a>
<a class="nav-item nav-link" href="#">Alumnos</a>
<a class="nav-item nav-link active" href="#">Consultas<span class="sr-only">(current)</span></a>
</div>
<div class="mx-auto"><b><h4>Consulta General [Notas]</h4></b></div>
</div>
</nav>
</header>
<section>...<section>
<section>...<section>
<button type="button" class="btn btn-secondary" style="width:auto" onClick="window.location.href='../Consultas.html'">Menu Consultas</button>
<section>...<section>
<footer>...</footer>
<!-- Opptional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The only fix I have for the button that I have in the body bellow all the other code but on the nav the code button tag does the same for the code of a tag
From the navbar the only one that has given me a problem is Placeholder that is between the atags same with the code below and that is when I hover over the button it gets smaller and that changes the height of the navbar when I hover it, link works fine and all is just that the hover, also the same happens when I use the code for the button on the Navbar provided by bootstrap
<a class="btn btn-secondary" href="Menu.php" role="button">Menu Principal</a>
the button on my code works but the a with role=button on another page does the same as the nav.
Don't know if I fully explained my issue or is easy to understand, also the code I been using is on the documentation of the Bootstrap site, also for the navbar if I don't put fixed-top on the class it leaves a white space at the top of the page I put the following code on menustyle.css but it didn't fix it, is there another way to remove the white space without the need to use fixed-top in the nav class?
header{
margin:0px;
}
body{
margin:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">nav-bar</a>
</div>
<ul class="nav navbar-nav">
<li class="active" title="home">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
</html>
Hey, this is the working snippet for nav bar . Please show us the issue which you're facing

Bootstrap NavBar display Issue

My Nav bar is not displaying properly.the menus are stacking over another.Could anyone please help me to rule out the issue.i'm attaching the codes i used and also the current display of navbar in browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>New Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">New WebSite</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Education</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>

Bootstrap css fixed header no space

I have a page (Number 2 on image).
I want to fixing the header, but the container was under the header.
I dont understand why.
The Number 1 image is an example code. There is good.
Whats wrong?
I hope someone can help me! Thanks
(Laravel 5)
Example: https://getbootstrap.com/examples/navbar-fixed-top/#
My page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<!-- Styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="http://test.dev">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
According to bootstrap documentation The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.
CSS:
body{
padding:70px;
}
or
Place your content in the jumbotron container like in the image1 and remove the background-color of the jumbotron with your own css
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
In the example link you provided, the image 1, it has a container called jumbotron which has padding 60px; that is the reason the contents are not hidden under the navbar
Demo
Maybe this solution wil be helpfull
JSFIDLE
UPDATE:
Smarties way will be to add new class with row div so your bootstrap css stay untouched.
.row-withmargin{
margin-right: -15px;
margin-left: -15px;
padding-top: 70px;
}

Why Chrome is displaying this simple bootstrap header in two lines?

The code below is displaying correctly in one line in both FF and IE but Chrome for some reason is displaying it in two lines as if both span and button elements had "display:block;". While I see that span has indeed computed display as block (because of the "float: left" as I could read elsewhere), but button has computed display as "inline-block" so it would seem that it should be rendered next to span and not below it.
It seems to behave like this with any version of Bootstrap >= 3.
Can anybody tell me why does Chrome behaves like?
(And I'm not asking how to place those element next to each other - I already found out that it works correctly when using ul and li elements)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<link href="bootstrap-3.1.1/dist/css/bootstrap.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap-3.1.1/dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="nav navbar-nav">
<span class="navbar-text">User Name</span>
<button type="button" class="btn btn-default navbar-btn">Log out</button>
</div>
</div>
</nav>
</body>
</html>
When I look at the documentation: http://getbootstrap.com/components/#navbar I see that the class="navbar navbar-nav" goes into a ul, so I tried it this way and it is working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li><span class="navbar-text">User Name</span></li>
<li><button type="button" class="btn btn-default navbar-btn">Log out</button></li>
</ul>
</div>
</nav>
</body>
</html>