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>
Related
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>
I've got a screenshot and code of my current site:
CODE
<!doctype html>
<html>
<head>
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
SCREENSHOT
Website Navbar
I would like the whole navbar to stretch across the top.
Any help would be appreciated!
Hey there is so many mistakes in your code copy paste this code its working fine
<html>
<head>
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</body>
</html>
Use position: absolute, top: 0px and left: 0px to put the navbar in the top-left corner of the page.
Then use width: 100% to make it "stretching" accross the top.
So basically you'll add this to the <style>:
.navbar {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
Here is your full code:
<!DOCTYPE html>
<html>
<head>
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
.navbar { /*This will do the trick.*/
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
A living demo here: https://codepen.io/marchmello/pen/bGVGzWW?editors=1000
Problem:
Fitting five links inside a navigation using Materialize CSS. Right now, three links fit and I can even add a fourth. But when I add five links in total, the last two break.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li><a href="javascript:void(0)">Contact</li>
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Desired output:
To get all five links to fit inside the navigation on the right side.
It's because your <a href="#">Contact is missing the close tag.
Here's the updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li> <!-- Note the </a> closing tag -->
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Here is my HTML code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{+title /}</title>
<link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="/css/foundation.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="row">
<div class="large-12 columns">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="left">
<li>Home<li>
<li>About<li>
<li>Cart<li>
</ul>
</section>
<nav>
</div>
</div>
{+body /}
<script data-main="/js/app" src="/components/requirejs/require.js"></script>
</body>
</html>
And My Out put is following - it seems that no CSS is affecting. Please note one thing that my foundation CSS is included and I have tested that.
I think you are missing Foundation init call. Add this before the end of the BODY tag:
$(document).foundation();
Here is a syntax for v6.3:
<!doctype html>
<html class="no-js" 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.0" />
<title>Foundation Starter Template</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I tried this but the hamburger is not showing only "Menu". I'm using foundation 6 and tested on Opera, Firefox,Chrome, and Edge.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<body>
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><h1><span>My Website</span></h1></li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
</nav>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
here is showing..
please confirm if call to scripts/css is right.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
</head>
<body>
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<span>My Website</span></h1>
</li>
<li class="toggle-topbar menu-icon">
</li>
</ul>
</nav>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
http://codepen.io/fabiovaz/pen/vLmEVw
Have you included the foundation icons in the app.scss file?
If not add this line:
#include foundation-menu-icon;