I have a nav bar at the left which has a few dropdowns. I want to make the text centrally align for the dropdowns or maybe a better representation of dropdowns in a nav bar. How to do that? (if possible without modifying css)
My current code snippet -
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Region</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Category</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Brand</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Packaging</a>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<!--<li class="nav-item">-->
<!--<a class="nav-link" href="https://v4-alpha.getbootstrap.com/examples/dashboard/#">Analytics</a>-->
<!--</li>-->
</ul>
</nav>
I'm not sure what you mean "centrally align". You can just use text-center to horizontally align the text.
<ul class="nav nav-pills flex-column text-center">
</ul>
http://www.codeply.com/go/J8C7RwDIDW
Related
I have created a simple dropdown menu using bootstrap Basic bootstrap dropdown
<li class="nav-item dropdown">
<a href="" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link">
<i class="fa-solid fa-user" style="font-size: 24px"></i>
</a>
<ul class="dropdown-menu w-500 align-items-stretch" aria-labelledby="dropdownMenu2">
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Nothing else</a></li>
</ul>
</li>
I've searched a lot on how to extend the UX for the user in a more complex window shown when the user clicks on the button but like this one.
Enhanced menu
Any hint on what bootstrap options do I have?
Thank you
You could always put a grid within the <li></li>. Of course you're going to have to use the docs (Grid system) to see what options you have in styling it, but basically:
<li>
<div class='row'>
<div class='col'>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Nothing else</a>
</div>
<div class='col'>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Nothing else</a>
</div>
<div class='col'>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Nothing else</a>
</div>
</div>
</li>
Hi there This navbar template is made with bootstrap 5.
In my opinion, the structure is the most beautiful bootstrap dropdown like following, I think.
Hope this helps for you.
Thanks, see you again.
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<div class=" collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Action</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Action
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Nothing else</a></li>
</ul>
</li>
</ul>
</div>
</div>
I have a simple navbar in which is there are multiple items i just need to center and make the last div to end.
My code
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto mt-2 mt-lg-0 justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
WHAT WE DO
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MEDIA
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<div class="dropdown drp-user" ngbDropdown placement='auto'>
<a href="javascript:" ngbDropdownToggle data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification" ngbDropdownMenu>
<div class="pro-head">
<img src="assets/images/user/avatar-2.jpg" class="img-radius" alt="User-Profile-Image">
<span>{{userTitle}}</span>
<a href="javascript:" class="dud-logout" title="Logout" (click)="logout()">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li *ngIf="user?.userTypeId == this.userTypeIdEnum.ADMIN"><a href="javascript:" class="dropdown-item"
routerLink="/manageprofile"><i class="feather icon-user"></i> Manage Profile</a></li>
<li><a href="javascript:" class="dropdown-item" routerLink="/auth/change-password"><i
class="feather icon-lock"></i> Change Password</a></li>
</ul>
</div>
</div>
</div>
</div>
In image i have marked red item which i need to do center if i am wrapping it to div then its not showing in a row.
I have created a header , with inside a navbar
I would like to have an element wihich become a dropdown-menu. But I don't understand why is not appearing my item.
I see on the link, that it seem easy:
https://getbootstrap.com/docs/4.0/components/navs/
Pills with dropdowns
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<header>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<header>
ITEC-EP
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Applications<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="wiki.html">Wiki</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
I dont have any error message.
When i click to my drop down menu, nothing happens. The inner element are not appearing.
I am trying to not use css, but only bootstrap. I chosed to use this template:
https://bootswatch.com/materia/
What am I mistaking?
In the future how can i debug in the developer mode in mozilla?
I imagine the issue is not having the correct javaScript packages installed. I had this when I first used Bootstrap, and I was missing popper.js
1) Why I can not change the nav-link color on CSS?
I'm trying to change the color of MENUTEST's (nav-link) to white, but it's not working
and
2) Add a line white above every MENUTEST's texts (just like [u] but above) How to do it?
What do i'm doing wrong?
navbar.php
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-faded fixed-top" style="background-color: #083F2C;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" height="60" width="160"></a>
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">MENUTEST</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<!-- <a class="dropdown-item" href="#">Ana Tereza fala em São Paulo sobre o Direito de Regresso no Fomento Comercial</a> -->
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENUTEST</a>
</li>
</ul>
</div>
</nav>
</header>
And navbar.css
/* MENUTEST */
.nav-link a {
font-color: white;
}
/* SUBMENUTEST */
.dropdown-menu {
background: #EDEFF1;
height: auto;
width: auto;
padding-left: 5px;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.dropdown-menu a {
color: #78828D;
font-size: 15px;
}
...............................................
font-color is not a css property. You'll want to use color.
.nav-link a {
// font-color: white;
color: white;
}
Try and take a little further than just the class and try -> li, a, .nav-link and then whatever css you want.
I can see you are using Bootstrap so it might be inheriting something. A trick I always use it to go to the Chrome browser and right click on the thing I want to change and click on "inspect" this will make it possible to see what css lies behind the item you want to change and you can then try to edit it in the browser and if it works copy that code and insert into your own css file.
Hope it helps :)
`<div class="menuBar">
<ul>
<li class="selected">HOME</li>
<li>PORTFOLIO</li>
....
</ul>
</div>
// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; }
// more general CSS
li.selected a { color: #FF0000; }`
How about this, have you tried using li.selcted a{color:#FF0000;}.
I am trying to change the color of the nav-link to white when hovering.
Using this doesn't work:
.nav-link:hover{ color:white; }
<nav class="navbar navbar-toggleable-lg fixed-top navbar-inverse">
<button class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<!-- You need this DIV for alignment -->
<a class="navbar-brand"
href="../index.php">d</a>
<div class="collapse navbar-collapse"
id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto scrollable-navmenu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">MD</a>
<div class="dropdown-menu"
aria-labelledby="dropdown01">
<a class="dropdown-item active"
href="#">
MD2 <span class="sr-only">(current)</span>
</a>
<a class="dropdown-item"
href="../md4">MD4</a>
<a class="dropdown-item"
href="../md5">MD5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown02"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">SHA</a>
<div class="dropdown-menu"
aria-labelledby="dropdown02">
<a class="dropdown-item"
href="../sha1">SHA1</a>
<a class="dropdown-item"
href="../sha256">SHA256</a>
<a class="dropdown-item"
href="../sha384">SHA384</a>
<a class="dropdown-item"
href="../sha512">SHA512</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown03"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">RIPEMD</a>
<div class="dropdown-menu"
aria-labelledby="dropdown03">
<a class="dropdown-item"
href="../ripemd128">RIPEMD128</a>
<a class="dropdown-item"
href="../ripemd160">RIPEMD160</a>
<a class="dropdown-item"
href="../ripemd256">RIPEMD256</a>
<a class="dropdown-item"
href="../ripemd320">RIPEMD320</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../whirlpool">Whirlpool</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown04"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Tiger</a>
<div class="dropdown-menu"
aria-labelledby="dropdown04">
<a class="dropdown-item"
href="../tiger128,3">Tiger128,3</a>
<a class="dropdown-item"
href="../tiger160,3">Tiger160,3</a>
<a class="dropdown-item"
href="../tiger192,3">Tiger192,3</a>
<a class="dropdown-item"
href="../tiger128,4">Tiger128,4</a>
<a class="dropdown-item"
href="../tiger160,4">Tiger160,4</a>
<a class="dropdown-item"
href="../tiger192,4">Tiger192,4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../snefru">Snefru</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../gost">GOST</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../adler32">Adler32</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../crc32">CRC32</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../crc32b">CRC32B</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown05"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">HAVAL</a>
<div class="dropdown-menu"
aria-labelledby="dropdown05">
<a class="dropdown-item"
href="../haval128,3">HAVAL128,3</a>
<a class="dropdown-item"
href="../haval160,3">HAVAL160,3</a>
<a class="dropdown-item"
href="../haval192,3">HAVAL192,3</a>
<a class="dropdown-item"
href="../haval224,3">HAVAL224,3</a>
<a class="dropdown-item"
href="../haval256,3">HAVAL256,3</a>
<a class="dropdown-item"
href="../haval128,4">HAVAL128,4</a>
<a class="dropdown-item"
href="../haval160,4">HAVAL160,4</a>
<a class="dropdown-item"
href="../haval192,4">HAVAL192,4</a>
<a class="dropdown-item"
href="../haval224,4">HAVAL224,4</a>
<a class="dropdown-item"
href="../haval256,4">HAVAL256,4</a>
<a class="dropdown-item"
href="../haval128,5">HAVAL128,5</a>
<a class="dropdown-item"
href="../haval160,5">HAVAL160,5</a>
<a class="dropdown-item"
href="../haval192,5">HAVAL192,5</a>
<a class="dropdown-item"
href="../haval224,5">HAVAL224,5</a>
<a class="dropdown-item"
href="../haval256,5">HAVAL256,5</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
You need to override the Bootstrap CSS, change it to:
.nav-link:hover {
color: white !important;
}