I am trying to add the row before the nav bar, but after adding the row , it is not visible and the rows is covered by nav bar. How can I show the row before the Nav bar
<header id="header">
<div class=row>
The text is not visible here
</div>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark-header fixed-top" id="main-nav">
<div class="w-100 d-flex">
<a class="navbar-brand mx-md-auto" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="container">
<img src="img/Logo.png" class="img-responsive" alt="" style="width:250px;">
<a class="navbar-brand" href="/">MyCompany</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">Our Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="text-light" style="position: fixed;">
The text is not visible here
</div>
you have to add a position to that div because it's overlaps with that header.
Class fixed-top is add to the nav element which sticks the navigating at top, and hides the above .row element.
You can Either remove the fixed-top class from navigation, if you dont need top fixed navigation
Add the .row element inside the navigation, which will fix the row at top of the navigation
Related
I have tried using flex property and justify content but that doesn't work as well. I tried the below mentioned code.
the aim is to make a website with a logo on top and navbar right below like shown below
how the site looks like as of now
<header class="top-part">
<div class="logo">
<img class="logo" src="images/logo.png" height=100px width="237px" >
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ">
<li >
<a class="nav-link" id="home"href="#">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="cart" href="#">link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact"href="#">link 3</a>
</li>
</ul>
</div>
</nav>
</header>
</head>
css :
#media screen and (min-width:777px){
.nav-link {
padding:18px 0;
min-width:120px;
}
.navbar {
padding: 0
}
}
.header{
position:sticky ;
top: 0;
}
I'd recommend doing some research and practicing with some basic HTML/CSS, so you understand the basics and know what everything does.
For this specific example you should look into 'flexbox'!
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header class="d-flex flex-column align-items-center">
<img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
<nav class="w-100 d-flex bg-light">
<a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 1</a>
<a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 2</a>
<a class="p-2 bd-highlight text-black-50 text-decoration-none" href="">link 3</a>
</nav>
</header>
header {
width: 100%;
text-align: center;
}
a:first-of-type{
float: left;
}
a:last-of-type{
float: right;
}
<header>
<img style="width: 100px;" src="https://images.unsplash.com/photo-1605666807892-8c11d020bede?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGJhbmFuYXxlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
<nav>
link 1
link 2
link 3
</nav>
</header>
Here is one method:
Add d-flex, flex-row, and justify-content-center to your parent div containing the logo.
You can add the same to your parent div for the links (ul and li's)
Your links are left aligned, so you can add "text-center" to classes of your <ul> element.
It would look like this:
<header class="top-part">
<div class="logo d-flex flex-row justify-content-center">
<img class="logo" src="images/logo.png" height=100px width="237px" >
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-row justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav text-center">
<li>
<a class="nav-link" id="home" href="#">link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="cart" href="#">link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact"href="#">link 3</a>
</li>
</ul>
</div>
</nav>
</header>
Also just a note, I see your code above is ending with </head>. Make sure you are not putting this code in the <head> of your site, but the <body> :)
There was a problem with extra padding in the navbar after the site icon. Initially, the idea was to place links that are located to the left of the icon closer to the left edge using me-3, but then the icon of the site is shifted to the right, which I basically don’t need.Therefore, I have a question. Is it possible to make the same indents from the site icon and links without shifting this icon from the center or how to remove the indent between the icon and links on the right side of the navbar.
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="scroll">
<div class="container-fluid">
<div class="collapse navbar-collapse order-1 order-lg-0 dual-collapse2" id="navbarNavAltMarkup">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#articles">기사들</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#mission">우리의 임무</a>
</li>
</ul>
</div>
<a class="navbar-brand order-0" href="#">
<img src="img/marslogo.png" alt="" width="30" height="30">
</a>
<div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 dual-collapse2" id="navbarNavAltMarkup"
>
<ul class="navbar-nav">
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#">사진들</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link" aria-current="page" href="#">문의하기</a>
</li>
</ul>
</div>
</div>
</nav>
I'm trying to create navbar at the top that sticks as one scrolls but is having difficulty trying to use bootstrap. My logo and the other text are not aligned.
HTML using bootstrap:
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-end style="background-color: #e7a412;">
<div class="container-fluid">
<!-- Mos logo -->
<div><a class="navbar-brand ms-lg-3" href="#">
<img src="images/mos_logo.png" alt=""></div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation">
<!--<span class="navbar-toggler-icon"></span>-->
<i class="fas fa-bars"></i>
</button>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mos Outlets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Mos</a>
</li>
</ul>
<span class="navbar-text">
</span>
</div>
</div>
</nav>
But my text is not aligned to logo:
enter image description here
the code <a class="navbar-brand ms-lg-3" href="#"></a> under <li> tag take its space so logo and other text are not align. I guess you duplicated it incorrectly?
Also, I found that there are some missing syntax and closing tags with your code. Please take the below code for your reference.
Missing a " for <nav>'s class.
Missing closing </a> for the logo div.
A extra closing tag</button>.
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light justify-content-end" style="background-color: #e7a412">
<div class="container-fluid">
<!-- Mos logo -->
<div>
<a class="navbar-brand ms-lg-3" href="#"> <img src="images/mos_logo.png" alt="" /></a>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<!--<span class="navbar-toggler-icon"></span>-->
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Mos Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mos Outlets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Mos</a>
</li>
</ul>
<span class="navbar-text"> </span>
</div>
</div>
</nav>
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Centering brand logo in Bootstrap Navbar
(7 answers)
Closed 2 years ago.
I'm trying to place a logo on my navbar, right in the center. The navbar automatically stretches to be the same size as the image which I don't want. How do I put a logo on my navbar that overlaps/doesn't stretch the navbar?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 mx-auto ">
<li class="nav-item active ">
<a class="nav-link " href="#">Home <span class="sr-only">(current)</span></a>
</li>
<div class="navbar-brand">
<img src = "test-logo.png" height="250" width="250" alt="test logo">
</div>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Hello here is the example code for your problem..
.navbar-brand {margin: 0 30px;padding: 0;}
.navbar-brand img {max-height: 68px;}
nav.navbar .navbar-nav li a {
padding: 0 20px;
line-height: 68px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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="navbar-brand d-block d-md-none">
<img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" width="60px" alt="logo" />
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto ">
<li class="nav-item active">
<a class="nav-link " href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Services</a>
</li>
<div class="navbar-brand d-none d-md-block">
<img src="https://www.jing.fm/clipimg/full/135-1359070_test-logos-full-logo-with-text-and-simple.png" alt="logo" />
</div>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I am new to Angular/Bootstrap and currently trying to put an image on top of the navigation bar in the top left corner. Using padding/margin could fix the problem with a normal resolution/static screen size, changing the size put the image elsewhere.
I have tried to use padding and margin, but as I said, it was not possible, to make it "sticky" in the top left corner, when changing the browser sice.
Also using the bootstrap classes, for example "pull-right" (just for test-cases) did not work.
My current code looks like:
<header>
<div class="cloud">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark $green static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" class="pull-right" alt="" width="431.27" height="55.35">
</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="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="first">
<h1>TestSite</h1>
</div>
</header>
I expected an image in the top left corner that is responsively staying there while changing browsersizes/devices
Please check this code to see, whether this is the desired result. Fully working demo is available here
Main Changes made on your code is.
added CSS class bg-dark and removed $green static-top on nav. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
fixed the width of brand image to 50%, using css. This can be changed to some other value.
removed width and height attributes from img tag.
.navbar-brand img{
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">
</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="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>