Hi i want change navbar color in light orange.I use bootstrap.
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
My output is orange not light orange :(
I tryed also with CSS but don't work.
CSS:
<stryle>
.navbar navbar-expand-lg navbar-light bg-warning{
background-color:lightorange;
}
</stryle>
i see on https://getbootstrap.com/ that there are only a few colors. How can change color of navabar?
can you tray that
.navbar .navbar-expand-lg .navbar-light .bg-warning{
background-color:#000;}
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
...............
</nav>
Related
In Bulma, how does one change text color for multiple items at once?
That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.
I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.
I looked in the customization docs and tried setting $text: black; but that didn't work either.
Is there a way to set all the grayish text color in a section or container to black?
And, how does one set/customize the global or site-wide text color from grayish to black (or something else?
(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)
Thanks in advance.
Ralph
The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link
https://bulma.io/documentation/components/navbar/#colors
In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
If you are confused over the color combination, visit--> https://coolors.co
Cheers!! :)
I'm using the latest version of font-awesome svg+js. I can only change the color of the icons with inline style.
Whenever I add a class, the icon stops showing and it becomes a flashing exclamation point.
This is a small fiddle showing the problem https://jsfiddle.net/CaioSantAnna/Lb5dpo7v/7/
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<span class="fa-4x" style="background: #4CAF50">
<i class="far fa-circle" style="color:white"></i>
<i class="far fa-circle fa-white"></i>
</span>
<style type="text/css">
.fa-white{
fill:#ffffff;
color: #ffffff;
}
</style>
Is it possible to achieve the inline result with a common css class ?
Thanks.
Apparently the prefix fa-for an additional class will cause an error. The solution would be using an extra class without the prefix: for example white instead of fa-white
.white{
fill:#ffffff;
color: #ffffff;
}
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<span class="fa-4x" style="background: #4CAF50">
<i class="far fa-circle"></i>
<i class="far fa-circle white"></i>
</span>
An alternative solution would be using the prefixed class on the wrapping span:
.fa-white{
fill:#ffffff;
color: #ffffff;
}
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<span class="fa-4x fa-white" style="background: #4CAF50">
<i class="far fa-circle"></i>
<i class="far fa-circle"></i>
</span>
I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.
I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.
.navbar{
position:absolute;
}
I am trying to create a responsive menu, I am not sure my navbar-nav function is working well or not,This is the first time creating,responsive menu.I created the class navbar-nav and uploaded to server and checked with tablet, mobiles, both giving same result,according to the device not changed.please visit the site. Waiting for answer, how to change the below code for responsive menu and proper guidance .
<div class="container">
<div class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="image/logo.png" alt="Lotus Groups"/>
Lotus Groups</a>
</div>
<ul class="nav navbar-nav" style="float:right">
<li>Lotus Construction</li>
<li>Lotus Interior</li>
<li>Lotus Digital</li>
<li>Lotus Property</li>
<li>Lotus Site</li>
</ul>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
JsFiddle
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
It includes predefined classes for easy layout options, as well as
powerful
mixins for generating more semantic layouts.
Can you please post the css also, so that we can see what is in the class navbar-nav
Edit:
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
to the header and if that doesnt work,
Have a look at this tutorial
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
You can also try this :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
<ul class="nav navbar-nav">
<li><img href="#"><img src="image/logo.png" alt="Lotus Groups"></li>
<li>Lotus Construction</li>
<li>Lotus Interior</li>
<li>Lotus Digital</li>
<li>Lotus Property</li>
<li>Lotus Site</li>
</ul>
</div>
</div></div>
</div>
</body>
I put your image in a li tag to include it in the navbar so on mobile the image won't go on your different menus.
The div tag with class="navbar-header" is here to dispplay a toggle button when screen is to small
EDIT:
I have added a line in your head tag, just add it please.
I've also deleted your first div class container.
It should now work !
Working with Material Design Lite, and the initial test is proving unreliable. I'm trying to reproduce the demo shown here: The first Layout Example.
It looks like this, a menu header with a hamburger icon: . However when I try to implement this in my project I get the header with the "Title" text, but no Hamburger Icon. What am I doing wrong?
Here is my code:
<head>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css">
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link1</a>
<a class="mdl-navigation__link" href="">Link2</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
</body>
</html>
There's no explicit mention of the menu icon and I believe that is because the default is for it to appear although the documentation is unclear on this point.
Here's the code they list to use for this demo to work:
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
color: white;
}
</style>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
<div class="mdl-layout__drawer-button"
role="button" aria-expanded="false">
<i class="material-icons">menu</i>
</div>
add this between these two divs mdl-layout__drawer, mdl-layout__content