I have a button group using twitter bootstrap as you see here:
http://jsfiddle.net/rmk7H/
It makes a linear-gradient background:
linear-gradient(to bottom, #FFFFFF, #E6E6E6)
which is annoying me. I want it to have a transparent background by adding mynav class. How should I modify mynav class?
HTML:
<div class="btn-group mynav">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active">Home</li>
<li>Library</li>
...
</ul>
</ul>
</div>
CSS:
.mynav
{
}
You need to make the background of the a transparent add this
.mynav > a {
background:none;
border:none;
box-shadow:none;
}
http://jsfiddle.net/rmk7H/2/
Transparant, like this?
.mynav .btn
{
background-image: none;
}
Related
New to frontend development and trying to get acquainted with Twitter Bootstrap 4 and CSS with a mock nonprofit page. I really like how the Auth0.com header nav looks and I'm trying to replicate it with my own logo, colors and link text.
I have created a jsFiddle capturing my best attempt but essentially the code I have is as follows:
Excerpt from template.html -- see jsFiddle for full:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin:24px 0;">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://raw.githubusercontent.com/bitbythecron/bootstrap-troubleshooting/main/dummy-logo.png" class="img-fluid mainlogo" alt="Responsive image">
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navb">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Find</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Always</a>
</li>
<li class="nav-item">
<a class="nav-link red-button" href="javascript:void(0)">WATCH DEMO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link bordered" href="javascript:void(0)">Sign Up</a>
</li>
</ul>
</div>
</nav>
main.css:
html, body {
height: 100%;
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
.red-button {
border-radius: 5px;
border: 1px solid #A81E30;
background-color: #A81E30;
color: beige;
}
.mainlogo {
width: 35%;
}
When this runs in the browser, I get:
Several things here:
above the navbar there is about ~10px of whitespace, and I'd like there to be none; I tried setting <html>'s padding: 0px but that does not seem to work
the navbar background color is the BS4 default dark gray, but I'd like it to be the same color as the dark blue on my logo (#001A31)
I would like to remove all padding from the navbar so that the height of the navbar is the same height as the logo
just like the Auth0 navbar, I would like the header navbar to centered but with extra spacing between the logo and the first link ("About") and also the same extra space between the last red-button link ("WATCH DEMO") and the "Sign In" link
So I ask: what changes do I need to make to my HTML/CSS to accomplish my mock page's navbar looking like the Auth0 one, and how do I do all this while keeping the code responsive?
You have a style="margin:24px 0;" into your <nav> tag.
Placements in css acts like a clock. I mean, in order :
Top
Right
Bottom
Left
Result : margin : top right bottom left;
Or by pairs :
Top & bottom
Left & right
Result : margin : top&bottom left&right;
So your style="margin:24px 0;" should be removed, or interverting 24px with 0.
Because you are actually saying :
Margin Top and Bottom = 24px
Margin Left and Right = 0px
PS: It is a bad practice to add style directly in HTML. For testing purposes, I suggest you to use your browser console, because you can change css properties for each elements, and see what happens.
Hope this will help.
I am working on a website and I want the navigation (only home the homepage) to be transparent and the image to cover the full screen. This is what I have so far:
The nav-bar is styled in this way because that's how it is on the other pages.
This is my HTML:
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img class="logo" src="app/assets/images/bunklogo.png" alt="bunk">
Bunk.
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="landlord.html">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
<li class="nav-iten">
<button class="btn signup"> SIGN UP</button>
</li>
</ul>
</div>
</nav>
</div>
and my css:
#mainNav {
background-image: linear-gradient(90deg, #439EE0 0%, #26ADE6 100%);
/*margin-top: -0.5%;*/
padding-top: 1rem;
padding-bottom: 3rem;
margin-bottom: 0;
}
.navbar-toggler.navbar-toggler-right {
color:white;
border: 1px solid white;
font-size: 1.2rem;
padding: 1rem;
}
.navbar-light .navbar-nav .nav-link {
font-size: 1.2rem;
color: #ffffff;
letter-spacing: 0.8px;
text-align: center;
padding-right: 5rem;
}
.navbar-brand.js-scroll-trigger {
color: #ffffff;
font-size: 2rem;
}
Any suggestions?
There's no need for any custom css hacks here.
To make your Bootstrap navbar transparent, all you need is to remove the class bg-light.
That's it!
The bg in bg-light stands for "background". So, if you leave out the class for background color, you automatically have a transparent navbar.
Ok, first of all you need to separate the home page from the other pages. To do this just insert an ID on your body section like #home.
So, in this scenario you will add the following:
body#home #mainNav {
background:transparent;
background-image:none;
position:absolute;
width:100%;
left:0px;
right:0px;
top:0px;
}
Don't forget that your Slider (or w/e you have after #mainNav), maybe will need some padding-top equals to the #mainNav height, for example (in case that your #mainNav height is 50px):
.slider {
padding-top:50px;
}
You can give an extra class to your navbar on your index.html only. (or your homepage html file name.)
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-trans navbar--home" id="mainNav">
Then you can select this class like :
#mainNav.navbar--home{
background:transparent;
}
Use home page body class, for ex.: ".home / .home-index / .index-page" as a parent of ".nav.fixed-top" container.
CSS::
.home .nav.fixed-top{
background:rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
I have a bootstrap 3 navbar.
JSFiddle
<div class="navbar navbar-inverse no-print">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/portal/home/index/">Logo of Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
My Menu Processes<span class="caret"></span>
</li>
<li class="dropdown">
Enquiries<span class="caret"></span>
</li>
<li class="dropdown">
Admin Reports <span class="caret"></span>
</li>
<li class="dropdown">
System Maintenance<span class="caret"></span>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a>Change password</a>
</li>
<li>
Welcome Firstname Lastname
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
When the width of the window is full desktop size it is correct.
When the width of the window is smaller mobile phone size it correct.
In between these two sizes it wraps this menu as well as doubling the menu's height which I don't want.
I think my only option is probably to increase the mobile width to increase with inbetween widths so the navbar shows in mobile mode in the screenshot.
What css do I need to achieve this?
How do I force the right navbar <ul> to not be allowed to move below the left navbar <ul>?
Try this...
#media (max-width: 1230px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
From: http://www.bootply.com/120951
By default, the navbar toggles and becomes accessible via the burger menu at viewports <= 767px...
Your best bet (something I do all the time with BS!) is to make is collapse at larger viewports. You can do this with this handy snippet of code.
#media (min-width: 768px) and (max-width: 991px) { /* You can change the max-width to whatever you want... */
.parent-class .navbar-collapse.collapse {
display: none;
}
.parent-class .navbar-collapse.collapse.in {
display: block;
}
.parent-class .navbar-header .collapse, .navbar-toggle {
display:block;
}
.parent-class .navbar-header {
float:none;
}
}
The above is a modified version of another answer on SO from some time ago - I can't find the link to it (I have this snippet lurking on my PC as I use it often).
You'll notice I've prepended .parent-class to the selectors above, this is to ensure these styles override the default BootStrap styles which don't normally get overridden till 767px and below...
<ul> is a block level element
you can use all li items in single <ul>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
My Menu Processes<span class="caret"></span>
</li>
<li class="dropdown">
Enquiries<span class="caret"></span>
</li>
<li class="dropdown">
Admin Reports <span class="caret"></span>
</li>
<li class="dropdown">
System Maintenance<span class="caret"></span>
</li>
<li>
<a>Change password</a>
</li>
<li>
Welcome Firstname Lastname
</li>
<li>
Log Out
</li>
</ul>
Or you can align right and left align both <ul> and set tab view to set 12 columns each so both <ul> look better in tab view
mostly password login etc goes to top bar in a separate div.......so it will not break menu alignment
I'm trying to extend this custom component example http://getbootstrap.com/examples/cover/ by adding appropriate style to dropdown element.
<li class="dropdown masthead-dropdown">
<a class="" data-toggle="dropdown" href="#">Media<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos</li>
<li>Pictures</li>
</ul>
</li>
CSS:
.masthead-dropdown{
background-color: transparent !important;
border-color:white !important;}
Custom styles are included after bootstrap.css, but they doesn't work.
Going by the Cover menu list, I used it to guess the part of your code since I don't know what is wrapping the <li>:
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li><ul class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Media
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Videos</li>
<li>Pictures</li>
</ul>
</ul></li>
</ul>
</nav>
</div>
</div>
Then add to your CSS:
.dropdown-toggle {
background-color: transparent;
border-color: #fff;
border-style: solid;
border-top: none;
border-right: none;
border-left: none;
}
And you can change the dropdown background colors with this:
.dropdown-menu{
background-color: #000;
}
And the links font color:
.dropdown-menu>li>a{
color: #fff;
}
JSFiddle
I want the Data, Graph, Map, Table text color to be blue. Below is my code. I am new to HTML and CSS
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data<span class="caret"></span></a>
<ul class="dropdown-menu" id="csv">
<li>cartodb_test1</li>
<li>test</li>
</ul>
</li>
<li>Graph</li>
<li>Map</li>
<li>Table</li>
</ul>
</div>
Below is my css part
.nav.navbar-nav li a {
color: blue;
}
My result:
As discussed below: Other styles are overridding yours, if you really need to override the color you can use !important.
.navbar-nav a{
color: dodgerblue !important;
}
.dropdown-menu a{
color: grey !important;
}