My dropdown menu on my nav bar does not show up on iPhone 6 or iPad. However, the drop-down menu shows on my laptop (MacBook air) on chrome, safari, and firefox. My website is http://emilypedersen.me
The code for my navbar is as follows:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Emily Pedersen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
</head>
<body>
<!-- .navbar -->
<nav class="navbar navbar-full navbar-dark bg-primary">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">
☰
</button>
<a class = 'navbar-brand' href="home" id = 'brand'> <img src="images/emily_pedersen_2.jpg"></a>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav pull-lg-right">
<li class="nav-item">
<a class="nav-link" href="home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdown1" data-toggle="dropdown">About ▿</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="about_me">About Me</a></li>
<li><a class="dropdown-item" href="my_travels">My Travels</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio ▿</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="resume">Resume</a></li>
<li><a class="dropdown-item" href="projects">Projects</a></li>
<li><a class="dropdown-item" href="writings">Writings</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>
</body>
</html>
Here is the css for my nav bar:
#media (max-width: 62em) {
.navbar-nav {
padding-top: .425rem;
padding-left: 0.75rem;
}
.navbar-nav .nav-item {
float: none;
}
.navbar-brand {
float: right;
}
#brand {
width:80%;
}
.navbar-toggler {
width: 10%;
}
.navbar-brand,
.navbar-nav .nav-item {
display: block;
}
.navbar-nav .nav-item + .nav-item {
margin-left: 0;
}
.dropdown-menu {
position: relative;
float: none;
background-color: white;
}
.dropdown-menu > li > a {
color: black;
background-color: white;
}
}
.navbar-dark .navbar-nav .nav-link {
color:white;
}
.nav-link {
text-transform: uppercase;
font-size: 12px;
font-weight: 400;
line-height: 1em;
letter-spacing: 1px;
}
.navbar-nav > li > a {
padding: 5px;
margin-top: 30px;
}
.nav > li > a:focus, .nav > li > a:hover {
background-color: transparent;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
background-color: transparent;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
background-color:transparent;
color:#7EB6FF;
}
.dropdown-item {
display:block;
font-size:12px;
text-transform: uppercase;
}
.navbar-brand {
margin-top:10px;
}
I'm not sure if this is an issue of #media tags or the hardware on which my website is running. The drop-down menu works on desktop computers, laptops, and Android 7.0.
Any guidance or suggestions would be greatly appreciated!
So I found that this stackover answer: (Bootstrap 4 navbar dropdown menu item not clickable on mobile devices).
Basically in my navigation.html I need to change from:
<a class="nav-link" id="navbarDropdown1" data-toggle="dropdown">About ▿</a>
to:
<a class="nav-link" href="#" role="button" id="navbarDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About ▿</a>
Related
Hey friends whats up............!
I am building this website using bootstrap 5 and I do have a navbar toggler on it........!
Its working fine but I do want it do fill the full width of screen when toggled.........!
Tried some stuff but could not do it. Here is my code. I appreciate any help................!
/***** Top menu *****/
.navbar {
background: #000;
transition: all .6s;
backface-visibility: hidden;
height: 88px;
}
.navbar.navbar-no-bg {
background: rgba(0, 0, 0);
}
.navbar-dark .navbar-nav {
font-size: 15px;
color: #fff;
font-weight: 600;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
color: rgba(255, 255, 255, 1);
border: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff;
outline: 0;
}
.navbar-brand {
width: 136px;
background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
border: 0;
margin-left: 60px;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.navbar-nav {
background: rgba(0, 0, 0);
padding-top: 24px;
margin-right: 70px;
padding-bottom: 24px;
left: 0;
right: 0;
text-align: center;
}
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link scroll-link" href="#top-content">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#about-us">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#portfolio">FAQ</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
You need to remove the container class OR move it up (in example) so it encapsulates all of your nav. Not sure where this came from, but it appears to be a design choice to have the collapse smaller. But this will fix it.
/***** Top menu *****/
.navbar {
background: #000;
transition: all .6s;
backface-visibility: hidden;
height: 88px;
}
.navbar.navbar-no-bg {
background: rgba(0, 0, 0);
}
.navbar-dark .navbar-nav {
font-size: 15px;
color: #fff;
font-weight: 600;
margin: 0 auto;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
color: rgba(255, 255, 255, 1);
border: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff;
outline: 0;
}
.navbar-brand {
width: 136px;
background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
border: 0;
margin-left: 60px;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.navbar-nav {
background: rgba(0, 0, 0);
padding-top: 24px;
margin-right: 70px;
padding-bottom: 24px;
left: 0;
right: 0;
text-align: center;
}
<!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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
<a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link scroll-link" href="#top-content">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#about-us">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#portfolio">FAQ</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 2 years ago.
So when the default color for my Nav items is black. Now i'm trying to use my css to change the color to white but it isn't working. bothe the nav brand and the nav links
could it be the scripts on the page affecting it? if not how do i change the default bootstrap css settings
.navbar{
padding: 20px 0px;
box-shadow: none;
background-color: transparent;
}
.navbar-brand{
font-size: 28px;
font-weight: 700;
color: #3a3a3a;
}
.navbar .navbar-expand-md .navbar-nav .nav-link{
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link::before {
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 0px;
height: 2px;
background: #ffffff;
transition: all .5s ease-in-out;
}
.navbar-nav .nav-item .nav-link:hover::before,
.navbar-nav .nav-item .nav-link.active::before {
width: 40px;
}
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#page-top">Otikes Fitness</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#page-top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
The problem is with the CSS selector. Instead of .navbar .navbar-expand-md .navbar-nav .nav-link it should be .navbar.navbar-expand-md .navbar-nav .nav-link because .navbar-expand-md isn't a child of .navbar, it's the same element.
.navbar.navbar-expand-md .navbar-nav .nav-link {
position: relative;
font-size: 16px;
font-weight: 300;
color: #ffffff;
padding: 0px 30px 0px;
transition: all .5s ease-in-out;
}
I am using bootstrap 4 navbar to create my menu. In my menu, I have a dropdown menu. I want to customize my dropdown top border, but problem is the top border will look like image.
I am trying to add a png image with dropdown, so that the top border could change, but it's not looking like a border and it leaves some margin as well.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<style>
.dropdown {list-style: none; background: green; display: inline-block;}
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .dropdown-menu{background-image: url("images/arrow.png"); background-repeat: no-repeat;
background-size: 20px 20px;
}
.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
.dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
color: #fff;
background-color: #b91773;
border-color: #fff;
}
</style>
<body>
<div class="container">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</div>
</body>
</html>
I used 100% 6px in background-size property. Is this the desired output?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<style>
.dropdown {list-style: none; background: green; display: inline-block; }
.dropdown .nav-link {color:#fff; text-decoration: none;}
.dropdown .dropdown-menu a{color: #000; text-decoration: none;}
.dropdown .dropdown-menu{
background-size: 100% 6px;
background-image: url("https://simimaging.co.uk/wp-content/themes/theme1491_RWD/images/divider.png");
background-repeat: no-repeat;
}
.dropdown-menu{
margin-top:20px;
border-top:none;}
.dropdown .btn {background: green; color:#fff;}
.dropdown .btn:hover {background: cyan; color:#000;}
.dropdown .btn:active {background: cyan; color:#000;}
.dropdown .btn:focus {background: cyan; color:#000;}
.dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}
.container .dropdown .dropdown-menu a:hover
{
color: #fff;
background-color: #b91773;
border-color: #fff;
}
.dropdown-item:nth-of-type(1) {
}
</style>
<body>
<div class="container">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</div>
</body>
</html>
I was wondering if you could tell me how to get a collapsable box to appear on on a website using javascript?
What I want on the website is to resize the screen (to like a mobile for example) and it replaces the nav bar with a drop down box that has to be clicked on.
Is this possible?
Thanks in advance to all!
#navLocation {
position:relative;
float: right;
top: 55;
right: 125;
font-size: 155%;
}
<div id="navLocation">
<a id="container" id="navLocation" href="index.html">home</a> about projects news contact
</div>
Here is JSFiddle
.navbar-inverse {
background-color: #000000;
margin-top:10px;
float: right;
border: none;
margin-right: 10px;
border-radius: 0px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
color: #FFFFFF;
background-color: #000000;
border: none;
}
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
color: #FFFFFF;
background-color: 000000;
}
ul li{
font-size: 20px;
}
ul li a{
text-decoration: none;
color: #000000;
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2 </li>
<li>Menu 3</li>
</ul>
</div>
</div>
</nav>
is this the same that you want?
hope this helps.
I have made an example for you. Please have a look.
`https://jsfiddle.net/ibrahimince/yrashdfm/`
ups. I have forgotten to add jquery library. You need to add jquery library.
https://jsfiddle.net/ibrahimince/qntz5w3u/
This is my html and css.please help me with the scrollspy as I dont know what exactly is the problem .If possible let me know the code you have written to solve the problem
MY HTML:
<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">
<button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">☰</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#"></a>
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#skills">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>
MY CSS
and the divs are of 750px in heights
body
{
background: none;
position: relative;
margin: 0;
padding: 0;
font-family: 'Droid Serif', Georgia, Times, serif;
}
/* --------------------------------------------Navbar CSS--------------------------------------------------- */
.navbar-default
{
background-color: #610B0B ;
border-radius:0px;
}
.navbar-default .navbar-nav > li > a
{
color: white;
font-size: 15px;
font-family: 'Droid Serif', Georgia, Times, serif;
letter-spacing: 1px;
margin: 3px 10px -3px 10px;
border: 2px solid transparent;
padding: 8px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 8px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: #555;
background-color: #E7E7E7;
}
There are a couple of things wrong.
First, 3 of your nav-link anchors have data-target= when they should have href=
Second, you need to set the data-target= to the <body> of the navbar. This allows Javascript to find what to target with Scrollspy:
<body data-target="#navbar">
and third, if you haven't, you need to call Scrollspy via Javascript:
$('body').scrollspy({ target: '#navbar' })
Here is a Codepen with a working example:
http://codepen.io/charliebeckstrand/pen/NrWpXP
I had same problem in bootstrap 5 and downloaded bootstrap 4.3.1
and replace it with previous version.