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>
Related
could anyone let me know what's wrong and cart icon is not displayed?
`<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.0">
<title>Website</title>
<link rel="stylesheet" href="" class="rel">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<secton id="header">
<img src="/logo.png" class="logo" alt="">
<div>
<ul id="navbar">
<li>Home</li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-bag-shopping"></i></li>
</ul>
</div>
</secton>
<script src="script.js"></script>
</body>
Tried different icons and it's not working anyway..
You need to use the proper class names
.fas not .fa-solid
.fa-bags-shopping, .fa-shopping-bag, .fa-shopping-cart, or .fa-shopping-basket not .fa-bag-shopping
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<i class="fas fa-bags-shopping"></i>
<i class="fas fa-shopping-bag"></i>
<i class="fas fa-shopping-cart"></i>
<i class="fas fa-shopping-basket"></i>
First my original code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
</html>
But I want it external so I can change it once for every page so I did the following;
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id="menu">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>$("#menu").html('<object data="menubaperium.html">');</script>
</div>
</html>
and to be complete the "menubaperium.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a></li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
But when I use the script version my menu in not horizontally lined out I searched the internet but I can not find a solution. I hope someone can help me..
Ok after days of searching the internet and trying I found a working solution.
First I changed this part;
<div id=menu>
<ul> <!-- below is the classic vertical menu -->
<li><a class="home" href="home.asp">Home</a></li>
<li><a class="news" href="news.asp">News</a></li>
<li><a class="shop" href="shop.asp">Shop</a></li>
<li><a class="journey" href="about.asp">Our journey</a
</li>
<li><a class="contact" href="contact">Contact</a></li>
<!-- search element-->
<!-- <input type="text" placeholder="Typuhhhh"> -->
</ul>
</div>
For this part;
<body>
<nav id="navMenu"></nav>
<script src="menu.js"></script>
</body>
and to be complete the menu.js;
document.getElementById("navMenu").innerHTML =
'<ul>'+
'<li>Home</li>'+
'<li>News</li>'+
'<li>Shop</li>'+
'<li>Our journey</li>'+
'<li>Contact</li>'+
'</ul>';
Hopefully this will help someone with the same problem.
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>
Trying to figure out whats causing this space at the top before the nav bar. www.omegadesignla.com There is a random nbsp; nbsp; space charater being generated into the html when you insepect the element, and I can't figure out whats causing it. Here is the beginning html:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
<meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<!-- <li>Promotional Items</li> -->
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
I need to make menu in bootstrap with nav-pills. I have 5 sections in menu and each section have text (Like first is "aaaa", second is "bbbb", etc). If I click on first section it shows text "aaaa" and click on second section it shows text "bbbb", but if I click on third/fourth/ fifth section nothing happens.
Any ideas how to resolve this? Thanks in advance.
<!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>APK Market</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="navbar">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#games">Games</a></li>
<li><a data-toggle="tab" href="#apps">Apps</a></li>
<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
<li><a data-toogle="tab" href="#themes">Themes</a></li>
<li><a data-toogle="tab" href="#archive">Archive</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="games" class="tab-pane active">aaaaaaaaaaaa</div>
<div id="apps" class="tab-pane">bbbbbbbbbbbbb</div>
<div id="live_wallpapers" class="tab-pane">ccccccccccc</div>
<div id="themes" class="tab-pane">ddddddddddd</div>
<div id="archive" class="tab-pane">eeeeeeeeee</div>
</div>
</div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
You spelled "toggle" wrong.
<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
<li><a data-toogle="tab" href="#themes">Themes</a></li>
<li><a data-toogle="tab" href="#archive">Archive</a></li>
change data-toogle to data-toggle..