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%;
}
Related
I have a code currently. This is dirt.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta class="nav-lin" tags -->
<meta class="nav-lin" charset="utf-8">
<meta class="nav-lin" name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
.container {
max-width: 1170px;
}
.bg-dark {
background-color: #90080a !important;
}
ul li {
border-right: 1px solid #c88383;
}
ul li:hover {
background-color: #7b0204;
}
ul li:last-child {
border: none
}
.nav-link {
padding: 0.5rem 0;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<header class="text-white bg-dark">
<ul class="nav justify-content-around">
<li>
<a class="nav-link text-white py-3" href="#">Trio Ring Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Bridal Ring Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Wedding Band Sets</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Engagement Rings</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Ladies Wedding Bands</a>
</li>
<li>
<a class="nav-link text-white py-3" href="#">Mens Wedding Bands</a>
</li>
<li>
<a class="nav-link text-white py-3 " href="#">More</a>
</li>
</ul>
</header>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="./bootstrap-5.0.1-dist/js/bootstrap.bundle.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>
I want to determine. Why the background does not extend to the whole li. How to achieve this? Elements are incorrectly arranged. I want to achieve → https://i.imgur.com/JXoaFlo.png. I would like to work on the Flex container.
I need to find out what is missing. This is my first time with bootstrap and a total of coding.
I created a navbar that will appear only on large screens
<nav id="sidebar" class="d-none d-lg-block">
...
</nav>
I also created a toggler that will show/hide the navbar on click
<i class="fa fa-bars custom-icon"></i>
The problem is that when I click the icon the navbar does not hide and display: none; does not have any effect when using d-none d-lg-block
How can I solve this ?
I realized that if display is none and we add d-lg-block then the navbar it appears again, which was the main problem as i was not able to hide the nav while that class was still present. So I created a function that will first remove it before hiding
$("#toggler").click(function()
{
if($("#sidebar").css('display') === 'none')
{
$("#sidebar").addClass("d-none");
$("#sidebar").addClass("d-lg-block");
$("#sidebar").toggle();
}
else
{
$("#sidebar").removeClass("d-none");
$("#sidebar").removeClass("d-lg-block");
$("#sidebar").toggle();
}
});
I hope this will be useful to anyone encountering the same thing
d-none sets the display as display:none!important meaning it can only be overwritten by other css that is also !important.
You could try this, although it's not very pretty:
function toggle($elmnt) {
if($elmnt.css('display') === 'none') {
$elmnt.css({'cssText': 'display: block!important;'});
} else {
$elmnt.css({'cssText': 'display: none!important;'});
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="sidebar" class="d-none d-lg-block">
navbar here
</nav>
<i class="fa fa-bars custom-icon"></i>toggle navbar
can you please follow the exact structure to make Navbar using BS4.
pure BS4 Navbar is like below snippet.
<!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/4.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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
I hope this code is help to solve your problem.
Thank you...
I am using bootstrap 3 navbar functionality. The navbar is working fine when not collapsed but when the nabar collapses, the button is not at all working and not showing the menu option. I really dont understand what is causing this problem. I tried figuring it out but couldnt find any solution. Any help would be greatly appreciated. When I use computer path to refer the bootstrap files then toggle button is not working but when i use web address its working. Can anybody please help me on this
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Jobs 4 U
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javscript" src="jquery-1.11.3.min.js"></script>
<script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.mt-top{
margin-top:75px;
}
.mt-top1{
margin-top:325px;
}
.vertical-center-row{
display:table-cell;
vertical-align: middle;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
.ht{
height:300px;
}
h2,h3{
text-align: center;
}
sup{
color:red;
}
.bck{
background-image: url('images/job_index.jpg');
background-repeat:no-repeat;
background-size: cover;
height:600px;
}
.abtpad{
padding:5px;
margin-bottom:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<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>
<a class="navbar-brand" href="index.php">Jobs 4u</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">How it Works</li>
<li class="">
<a class="" href="JobSeeker.php">Jobseeker</a>
</li>
<li class="">
<a class="" href="Employer.php">Employer</a>
</li>
<li class="">
<a class="" href="contactus.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
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>
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>