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>
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>
So I created a navigation menu for a website and it is mobile responsive(CSS Only). However when in responsive mode it converts the menu vertically which is good. I still want the menu to be vertically stacked, however I want it hamburger style for professional reasons. How do I change my responsive menu to be hamburger style? I would like for it to be built with CSS only as well.
I found one example of hamburger style that uses javascript, is it possible to do this with CSS only?
Here is the current responsive menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 charset = "UTF-8>
<title>Responsive Menu</title>
<style>
nav {
list-style-type: none;
margin-left: -9px;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:x-large;
float:left;
padding-bottom:10px
}
nav a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#media screen and (max-width: 700px) {
nav a {
text-align: center;
float: none;
}
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<nav>
<a class="navbar-brand" href="/">
<img src= "logo.png" width="60px" height="50px" class="center" >
</a>
Home
News
example
example2
example
<a style="float:right" href="#form">Form</a>
<a style="float:right" href="#registration">Registration</a>
</nav>
</body>
</html>
And here is a hamburger example that I want my responsive version to look like but I am not sure how to convert:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<nav class="topnav">
<section id="myLinks">
Home
News
example
</section>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</nav>
<main style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</main>
<!-- End smartphone / tablet look -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
try this
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
</ul>
</div>
</nav>
body{
background:url(background.jpg);
background-size: cover;
}
h1{
font-family: 'Dancing Script', cursive;
font-size: 5em;
color: white;
text-align: center;
margin-top: 25px;
margin-bottom: 20px;
}
h2{
font-size: 18px;
color: white;
text-align: center;
font-family: 'Tajawal', sans-serif;*/
}
hr{
border-color: white;
margin-left: 200px;
margin-right: 200px;
}
img{
float: center;
width: 20%;
height: 20%;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
li{
display: inline;
text-align: center;
font-family: 'Tajawal', sans-serif;
}
.btn-group{
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 50px;
}
.btn-group button {
align-items: center;
background-color: rgba(135, 138, 138, 0.1);
border: none;
color: white; /* White text */
padding: 10px 24px; /* Some padding */*/
cursor: pointer; /* Pointer/hand icon */
float: /* Float the buttons side by side */
box-shadow: 1px;
margin: 0 auto;
}
.btn-group button:not(:last-child) {
border-right: none; Prevent double borders
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(49,52,56);
border: 1.5px solid rgb(49,52,56);
}
.btn-group button:focus {
background-color: rgb(49,52,56);
outline: rgb(49,52,56);
border-color: rgb(49,52,56);
border: 1px solid rgb(49,52,56);
}
.btn-group a{
color: white;
}
.btn-group a:hover {
text-decoration: none;
}
/**/
/* Style the tab */
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
</head>
<body>
<!-- -->
<div class="heading">
<h1>Portfolio</h1>
</div>
<div class="btn-group">
<div class="tab"><button class="tablinks" onclick="openMenu(event, 'home')"> Home</button></div>
<div class="tab"><button class="tablinks2" onclick="openMenu(event, 'portfolio')">Portfolio</button></div>
</div>
<div id="home" class="tablinks">
<h2>My name is I am a Front End Web developer from . I have a passion for UX/UI and I m currently seeking employment around the country. I am willing to work remote as well as relocate. Take a look at my work and contact me via the info below to learn more.
<br>
<img src="treeshot.gif">
<p>
<li>HTML5 * </li>
<LI>CSS3 * </LI>
<li>JavaScript * </li>
<li>React * </li>
<li>Wordpress * </li>
<li>UX/UI * </li>
<li>Sketch * </li>
<li>Adobe Suite * </li>
<li>Passion and drive to continue learning</li>
</p>
<br>
<hr>
</h2>
</h2>
</div>
<div id="Projects" class="tablinks2">
Projects
</div>
<script type="text/javascript" src="script.js"></script>
</body>
So far I have made two square buttons into a horizontal bar below my header. I have hyperlinks added to the buttons, but I want to make them tabs so the header does not move and you can cleanly scroll between the two pages with no load time. I will post html and css. Thank you for the help. I have tried using js and css but neither seem to make what it do what I want
As i can see you're using bootstrap 4. So the best way to do what you want is using nav tabs. Check bootstrap documentation. Here is the example:
<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>
Bootstrap docs
Helo all. How can I prevent .slideUp for my drop down menu. I want the drop down menu slide up only if I leave the area of button which is .personal-mega and the .flyout.
This is the [example][1] link that I want to achieve.
I did try to adjust the js but it is not working.
$(document).ready(function(){
$(".personal-mega").hover(
function() {
$('.flyout', this).not('.in
.flyout').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.flyout', this).not('.in
.flyout').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
Here is the snippet:
(The menu is responsive please view it with full page)
$(".personal-mega").hover(function(){
$('.flyout').slideDown("400");
});
/*
$(document).ready(function(){
$(".personal-mega").hover(
function() {
$('.flyout', this).stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.flyout', this).stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});*/
/* navbar/top navbar */
.pos-navbar{
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
.pos-main-nav li a, .pos-top-nav li a{
text-transform: uppercase;
font-weight: 500;
}
.bg-pos{
background-color: #DF1E34;
}
.pos-menu{
border: 1px solid #DF1E34;
border-radius: 50px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
overflow: hidden;
}
.pos-menu a{
color: #DF1E34 !important;
}
.pos-menu:hover{
transition: all 0.6s ease;
}
.pos-menu:hover a{
color: #FFFFFF !important;
}
.pos-top-menu{
border: 1px solid #FFFFFF;
border-radius: 50px;
padding-left: 10px;
padding-right: 10px;
}
.pos-top-menu button{
text-transform: uppercase;
font-size: 14px;
background-color: transparent;
border: none;
}
.pos-top-menu button:focus{
box-shadow: none;
}
.pos-top-menu button:after{
content: none;
}
.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show>button.dropdown-toggle,
.pos-top-menu button:hover{
color: #FFFFFF;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
/*.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show > button.dropdown-toggle{
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}*/
.pos-top-menu ul{
padding : 0;
top: 10px !important;
left: -30px !important;
overflow: hidden;
}
.pos-top-menu ul .dropdown-item{
padding: 0;
}
.pos-top-nav li a{
font-size: 14px;
color: #FFFFFF !important;
}
.pos-top-nav .pos-top-menu ul li a{
color: #666666 !important;
}
.pos-top-nav li a:active,
.pos-top-nav li a:focus,
.pos-top-nav li a:hover{
color: #333333 !important;
}
.no-link{
pointer-events: none;
cursor: default;
}
.nav-item{
display: inline-block;
}
/* overide hover.css */
.hvr-sweep-to-bottom:before{
background: #DF1E34;
}
.hvr-underline-from-center:before{
left: 50%;
right: 50%;
background: #DF1E34;
height: 2px;
}
.flyout {
position:absolute;
width:100%;
background:red;
overflow: hidden;
z-index:10000000;
}
.hidden {
display:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- navbar -->
<nav class="pos-navbar navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pos-logo.svg" width="50%" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="pos-main-nav navbar-nav ml-auto">
<li class="nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link personal-hover personal-mega" href="#">Personal</a>
</li>
<li class="nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link" href="#">Business</a>
</li>
<li class="nav-item" style="width: 20px;"></li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Digital Mailbox</a>
</li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Promotion</a>
</li>
<li class="nav-item">
<a class="nav-link no-link" href="#">|</a>
</li>
<li class="nav-item hvr-float">
<a class="nav-link" href="#" data-toggle="modal" data-target=".search-modal-lg"><img src="img/icon-search.svg" width="20"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="flyout hidden container-fluid">131231<br>1<br>1<br>1<br>1</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
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>