The script generates a header Panel for my webpage which is displayed here:
I want the OcC field to begin at the intersection of vertical and horizontal bar as shown. I am sure a margin: attribute can help me but don't know where to use it. Please help me and thanks.
<header>
<img src="C:/D DRIVE DATA/generic/logo.png" height="43" width="130">
height="43" width="130">
<div class="container">
<div class="row">
<nav class="navbar main-nav navbar-default ">
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown OcC">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">OcC </a>
</li>
<li class="dropdown CoO ">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">CoO </a>
</li>
<li class="dropdown Fccc">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">Fccc</a>
</li>
<li class="dropdown mpP">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">mpP</a>
</li>
<li class="dropdown iR">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">iR</a>
</li>
<li class="dropdown jko">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">jko</a>
</li></ul></li></ul></div></nav></div></div></header>
Related
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 2 years ago.
I'm using Bootstrap 4.2.1 and having issues trying to get the brand to appear to the right of my navbar. It's appearing just where I want it in a small viewport -- to the right of the hamburger -- but when expanded to a larger viewport, the logo appears to the left of the navbar items. I've tried using navbar-right, pull-right, float: right, placing the logo code in various spots in the navbar code, but I can't get it to appear on the right of the menu.
I'm probably missing something obvious, but any suggestions on how to get the logo to appear on the right? Here's the page. And below is an example of the code.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
<!-- menu/hamburger button -->
<button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button>
<!-- logo -->
<a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a>
<!-- end logo -->
<div class="collapse navbar-collapse text-center" id="navbarsExample11">
<ul class="navbar-nav align-items-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html">For Teachers</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a>
<a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Right now, your logo resolves after the hamburger button, but before your menu. You'll just have to have the logo resolve last.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<div class="mx-auto d-lg-flex d-block flex-lg-nowrap">
<!-- menu/hamburger button -->
<button aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler custom-toggler" data-target="#navbarsExample11" data-toggle="collapse" type="button">Menu <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse text-center" id="navbarsExample11">
<ul class="navbar-nav align-items-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown1" role="button">For Teens</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown2" role="button">For Parents</a> <span class="caret"></span>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="marijuanaPrevention.html">Marijuana Prevention</a> <a class="dropdown-item" href="alcoholPrevention.html">Alcohol Prevention</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="partners.html">For Teachers</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown4" role="button">Our Initiatives</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="futureForward.html">Future Forward</a> <a class="dropdown-item" href="talkTheyHearYou.html">Talk. They Hear You.</a>
</div>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown" data-toggle="dropdown" href="#" id="navbarDropdown5" role="button">Media</a>
<div aria-labelledby="navbarDropdown4" class="dropdown-menu">
<a class="dropdown-item" href="https://sacramentoccy.smugmug.com" target="_blank">Photos</a> <a class="dropdown-item" href="https://www.youtube.com/channel/UC5IR7O7WLAA8I-fHUfEYFXw" target="_blank">Videos</a>
<a class="dropdown-item" href="https://www.facebook.com/SacramentoCCY/" target="_blank">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
</ul>
</div>
<!-- logo -->
<a class="navbar-brand navbar-right" href="index.html"><img alt="CCFAC logo" height="42" src="images/logoSM.png"></a>
<!-- end logo -->
</div>
</nav>
Because I am trying to get the Text to remain a link and the dropdown toggle to open the dropdown, which, I've managed to achieve. But it causing Dropdown-2 to toggle/open Dropdown-1. And only Dropdown-1 is working.
Basically, can't figure out why its only opening Dropdown-1 only which ever Dropdown I click
I'm using Bootstrap 4.4.1
You can see the Pen here https://codepen.io/cr8tivly/pen/MWavBJr
This is the markup
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="row row-cols-4 navbar-nav main relative list-unstyled col-6">
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-1</a>
<ul class="dropdown-menu">
<li>item-1-one</li>
<li>item-2-one</li>
<li>item-3-one</li>
<li>item-4-one</li>
</ul>
</li>
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-2</a>
<ul class="dropdown-menu">
<li>item-1-two</li>
<li>item-2-two</li>
<li>item-3-two</li>
<li>item-4-two</li>
</ul>
</li>
<li class="col">Three</li>
<li class="col">Four</li>
</ul>
</nav>
The problem is data-toggle="dropdown" should be on the a. Check the documentation here.
Instead of:
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a>Dropdown-1</a>
Use:
<li class="col nav-item dropdown" aria-expanded="false">
<a data-toggle="dropdown">Dropdown-1</a>
Updated pen here.
If you want the plus sign to open the dropdown and the text to open a link you can do this:
<li class="col nav-item">
<div class="d-flex">
<a class="btn btn-link" href="http://google.com">Dropdown-2</a>
<button class="btn btn-light dropdown" id="d2" data-toggle="dropdown" aria-expanded="false">+</button>
<ul class="dropdown-menu" aria-labelledby="d2">
<li>item-1-two</li>
<li>item-2-two</li>
<li>item-3-two</li>
<li>item-4-two</li>
</ul>
</div>
</li>
I want to center the logo and have 2 navbar items from its left and the other 2 from the right. It will increase my website functionality and help with the more modern look. If someone could help me I would be really grateful, thanks a lot!!!
tried searching here i didnt find anything that was working for me.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img\binet-logo1.png" height="70"width="100" 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="navbar-nav ml-auto">
<li class="nav-item active">
<li class="nav-item">
<a class="nav-link" href="index.html">Дома</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Продукти
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="produkti.html">Ултразвучни системи</a>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="zanas.html">За Нас</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Bojan\Desktop\BinetMedical\contact.html">Контакт</a>
</li>
</ul>
</div>
</div>
You can try using this code to get the logo in the middle and the nav links on the sides.
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Дома</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Продукти
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="produkti.html">Ултразвучни системи</a>
</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#"> <img src="img\binet-logo1.png" height="70"width="100" alt=""></a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="zanas.html">За Нас</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\Bojan\Desktop\BinetMedical\contact.html">Контакт</a>
</li>
</ul>
</div>
</nav>
Each part is a seperate ul and i added the class mx-auto
my navbar
Hi, this is the code that i have used
<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="">
<div class="nav navbar-nav navbar-left" style="margin-top:15px;">
<img src="images/logostack.gif" alt="logo">
</div>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Something</li>
<li>Meet the Experts</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Shortcomings</li>
<li>Complications</li>
<li>Stakeholders</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Statistics </li>
<li>Profile Patient</li>
<li>Burden Economical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Management Approach</li>
<li>Algorithms & Protocols</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Non Critical</li>
<li>Critical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Modules</li>
<li>Videos </li>
<li>Images </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Post your Query</li>
<li>Experts Council</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
I want to place the menu below the logo without using margin on the ul list (since that will spoil the mobile responsiveness and collapse property of bootstrap) .. instead i want to do it with using row and column functions of bootstrap but since im new to it im not able to make it.. any sort of help really appreciated.. thanks in advance..
I've searched and maybe this will help.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
Link to article:
Center content in responsive bootstrap navbar
You can still use the margin property to achieve this, however if you want to eliminate the changed margin for collapsed menu bar, you can use CSS Media queries to change the margin back to zero. Ofcourse, there will be a certain screen size, where the navbar changes to collapsable navbar so you will need Media Queries.
#media only screen and (max-width:--px)
{
//your nav-bar code goes here
}
You have to take a row top of the navbar.
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
// Your navbar code
</nav>
</div>
Full code according to your question:
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" >
<!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
About Something
</li>
<li>
Meet the Experts
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Shortcomings
</li>
<li>
Complications
</li>
<li>
Stakeholders
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Statistics
</li>
<li>
Profile Patient
</li>
<li>
Burden Economical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Management Approach
</li>
<li>
Algorithms & Protocols
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Non Critical
</li>
<li>
Critical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Modules
</li>
<li>
Videos
</li>
<li>
Images
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Post your Query
</li>
<li>
Experts Council
</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
</nav>
</div>
You have to know about Bootstrap Grid.
I wanted to show a dropdown on click of the img icon but the dropdown is not opening on click, Here is my code.
<div class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li>
<h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>
Your code contains some invalid HTML markup. For example, I assume you mean role="button" instead of type="button" for the anchor element. Also, you should use href="#" or data-target="#" instead of href="javascript:void(0);". You could try this:
<div class="dropdown">
<a href="#" class="dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li><h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>