In Safari when you scroll navbar starts to shake. Sometimes it shakes just a little, sometimes its all over the place.
However, when you resize the page to the point of collapsing and then resize it back to the full view, this shaky and glitchy stuff disappears completely.
It only occurs in Safari and works totally fine in other browsers. My problem is exactly like the one here Bootstrap fixed navigation jumps when scrolling. I have tried all known solutions like
.navbar-fixed-top {
-webkit-backface-visibility: hidden;
}
and
header {
-webkit-backface-visibility: hidden; backface-visibility: hidden; position: fixed; z-index: 1000; }
but this shaky stuff is still there.
Just scroll up/down slowly and you will notice it.
Here is the link - https://codepen.io/ceejaytaylor/pen/YvVqVK
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Alegreya+SC|Cormorant+Unicase|Tenor+Sans|Arsenal" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>
Related
I already have a side menù, I want him to change into a hamburger menù whenever the website is open by a mobile device. I also use bootstrap libraries, I dunno if it can help, it would be better using them. Here's an example of what I have:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
div {
border: solid black 1px;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100%;
}
.menu {
text-align: center;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
<div class="menu">
<button>Content 1</button><br>
<button>Content 2</button><br>
<button>Content 3</button><br>
<button>Content 4</button><br>
<button>Content 5</button><br>
<button>Content 6</button><br>
<button>Content 7</button><br>
<button>Content 8</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
Since you're using Bootstrap, it's easier to do it with Bootstrap like this:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="yourlogo.com" class="d-inline-block align-top" width="32" height="32" alt="Your logo" />web.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar-content" aria-controls="navigation-bar-content" aria-expanded="false" aria-label="Expand navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation-bar-content">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link disabled" href="#">Products</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit</button>
</form>
</div>
</nav>
When used on a phone, the navigation menu folds into a hamburger. You can verify this, for example, using the developer tools (CTRL + SHIFT + I in Chrome).
Of course, you need to have some sort of search function for that search field or it won't work for you. You can also add a dropdown there, but you must also have JavaScript linked.
Basically I have a navbar at the top of the page. This navbar has a collapse functionality, so that the menu is still usable for small screens. I would like to attach a div at the bottom of this collapsible navbar. To be more specific, on the right side of the screen, there would be a red circle which is centered on the border of the navbar.
I am looking for something like this :
enter image description here
The circle is not a button. The collapsible button appears only for small screens (on the right of the navbar)
I have tried many suggestions I found on the Internet. Most of them suggested to give the parent div a relative position and an absolute position to the child div. But it never worked, and the only times it did, it was not responsive.
Here is my current HTML non responsive code
.circle {
position:absolute;
<--top:35px;-->
right:3vw;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-fixed-top navbar-expand-lg green-background">
<div class="container-fluid">
<-- 80 lines of navbar code including a collapse navbar-collapse div -->
</div>
<div class="circle"></div>
</nav>
So far, the only thing I can do is place the circle for a given size of screen. It is not stable if the screen size changes. It is not with the collapsible mode either.
Thank you very much for your help.
Have a nice day :)
You can calculate it using calc. You can subtract the px from total % according to your requirement .
.circle {
position:absolute;
top: calc(100% - 10px);
right:30px;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
<!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/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-full navbar-expand-lg navbar-light bg-light">
<div class="container logo" style="position: relative;">
<a class="navbar-brand text-left d-block float-left d-xl-flex logo" href="assets/img/kol-logoldpi.svg"><img class="kibrislogo" height="50" src='assets/img/kol-logoldpi2.svg' /></a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto text-center">
<li class="nav-item" role="presentation"><a class="nav-link active" href="index.html">Paketler</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="features.html">Kampanyalar</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="pricing.html">sss</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="about-us.html">Hizmet Noktalari</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html"><strong>İLETIŞIM</strong></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="contact-us.html" style="color: rgba(207,14,14,0.5);">TR/ENG</a></li>
</ul>
</div>
<img class="logo" style="position: absolute; right: -7%; height: 70px;" src="assets/img/kol-ccldpi.svg" alt="">
</div>
<div class="circle"></div>
</nav>
</body>
</html>
Try it by giving by adding your element inside of your navbar and add following properties:
.circle{
position:absolute;
z-index: 1001;
right: 35px;
top: 45px;
width:20px;
height:20px;
background: #d21c2d;
border-radius:50%;
}
I want to create a gap above navigation bar for echo name like: Welcome Sarah! Kindly check the image what output I am getting:
In above image I want to echo Welcome Sarah above the Login | Sign Up buttons.
I want to show search bar above the Adidad Shoe Store Starting from let-top. And welcome Sarah on the right-end. Then navigation will show.
my code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/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="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row float-right" >
// Search bar
<input type="text" placeholder="Search" name="search">
Hello Sarah!
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Adidas Shoe Store</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color:#007bff;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
</li>
</ul>
</div>
</nav>
This is not working as expected because Bootstrap .fixed-top class assigns z-index value of 1030 and position:fixed at top to the nav.
As a result, the .container you added is displayed both behind and not above the nav.
The .container needs position other than static and z-index greater than 1030 to display above the nav. Additionally, the nav needs some padding-top to make visual space for the .container contents in this scenario.
The following structure and added CSS achieves the effect you're looking for:
<div class="container" style="position: relative; z-index: 1031; padding: .5rem 1rem;">
<div class="row">
<div class="col-sm-6">
<input type="text" placeholder="Search" name="search">
</div>
<div class="col-sm-6 text-right">
Hello Sarah!
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 2.5rem">
(I've thrown in two .col-sm-6 divs inside your .row to make things easier to arrange on mobile resolutions; also note that .container class is of limited width unlike nav so you should change it to .container-fluid)
The image is getting covered by the menu even when I add the CSS code to give it a space. Then I just have a blue space above my menu but no image. I get a flash like it is loading it and then covering it.
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1</li>
<li>Planets 1-2</li>
<li>Moons 1-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS bit
body {
padding-top: 90px;
background-color: #aabbcc;
}
edit
I just added some more code in case the error is there.
<!DOCTYPE html>
<html>
<head>
<title>Journey To The Stars</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.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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="container">
Found my own answer!
Adblock Plus was blocking the picture. Now I need to learn why...
Edit:
Now I know why. It blocks "728x90". I added that to the name because my research showed it was the most common header picture size. Must be the most common ad size as well.
The problem is even after adding the padding: 90px; to the body, the header will be rendered after it, so you achieved nothing unless you use absolute positioning for example, try the snippet below:
body {
padding-top: 90px;
background-color: #aabbcc;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1
</li>
<li>Planets 1-2
</li>
<li>Moons 1-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?
Here is my CSS and Html as well,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
and css:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}
The map is not an image, it will not downsize while you downsize your browser