I am new with CSS and Bootstrap.
I try to create nav fixed-top with bootstrap but somehow it's transparent.
I tried to add to CSS !important but it didnt help.
How can I set the nav to be non-transparent?
Here my CSS & HTML code:
.myNavbar{
margin-top: 0em;
margin-bottom: 1em;
margin-left: 0em;
margin-right: 0em;
background: rgba(255, 166, 0, 0.623) !important;
padding-right: 0em;
text-align: center;
width: 100%;
}
<nav class="row myNavbar fixed-top ">
<a class="nav-link" routerLink="/main">home </a>
<a class="nav-link col" routerLink="/salads">salads</a>
<a class="nav-link col" routerLink="/galery">galery</a>
<a class="nav-link col span2" routerLink="/CuntactUs">contact</a>
<a class="nav-link col" routerLink="/AboutUs">about</a>
</nav>
Is there anyone who can help me please...
Thanks!
Change this
background: rgba(255, 166, 0, 0.623) !important;
to this
background: rgb(255, 166, 0);
or
background: rgba(255, 166, 0, 1);
to remove the alpha/opacity section of the background-color or set the alpha value to be fully opaque.
background: rgba(255, 166, 0, 0.623) !important;
Remove 0.632 from the rgb color and you're done!
Related
As the title says, you can see that before the blue background color of the button, there is a white background that appears first.
It's like a fading transition from white to blue.
How to remove white?
If I remove the box-shadow the white background won't appear?
<head>
<style>
.tabTitle:hover {
font-size: 1.1em;
text-shadow: 5px 5px 5px #8080808f;
}
.btnlist .nav-item .nav-link {
width: 200px;
height: 40px;
margin: auto;
border: none;
border-radius: 20px;
font-size: 1em;
font-style: normal;
font-weight: 500;
text-align: center;
color: #828282;
}
.btnlist .nav-item .nav-link.active {
background-color: #2F58E2;
box-shadow: 0px 4px 16px #2f58e250, 0px 8px 24px #2f58e250, 0px 16px 56px #2f58e250!important;
color: #ffffff;
}
</style>
</head>
<ul class="nav nav-pills mb-3 btnlist" id="pills-tab" role="tablist">
<li class="nav-item tabTitle" role="presentation">
<a class="nav-link active" id="pills-thongbao-tab" data-bs-toggle="pill" data-bs-target="#pills-thongbao" type="button" role="tab" aria-controls="pills-thongbao" aria-selected="false">button #1</a>
</li>
<li class="nav-item tabTitle" role="presentation">
<a class="nav-link" id="pills-tienich-tab" data-bs-toggle="pill" data-bs-target="#pills-tienich" type="button" role="tab" aria-controls="pills-tienich" aria-selected="true">button #2</a>
</li>
</ul>
It's actually not white but the button goes transparent for a split second. Layer the transition on top of another background. The white blink happens when the transition initializes CSS update and reloads it. It is just the transition taking place while rewriting the CSS to the new value.
Pseudo Code:
.baseBackground {
background: linear-gradient(#2F58E2, #3969ff);
}
.contact {
background: linear-gradient(#2F58E2, #3969ff);
}
/* On change for .contact */
.contact {
background-color: #2F58E2;
}
<div class="baseBackground">
<div class="contact"> Changes here </div>
</div>
I'm making a landing page for a client with a dropdown menu. I'm using bootstrap. I've been having an issue where the dropdown options are already expanded on page load, but only for IE. They also do not have any of the normal formattings for an 'expanded' dropdown (background color should be white, it's not, etc.) Instead, all the li are translucent gray. The options are hoverable and selectable, but the dropdown menu will not close (the caret is essentially unresponsive).
This problem has happened before, on other sites, for this same client. The weirdest thing is, in the past, I have been able to get it to work by merely uploading the folder again to the client's servers. Same code, not working once, then uploaded again and then working. For the life of me, I can't figure out why this is happening
.hero .hero-selection select {
width: 250px;
border: none;
font-size: 14px;
font-family: Proxima Nova Thin;
-moz-box-shadow: 0 0 0 35px rgba(255, 255, 255, .2);
-webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, .2);
box-shadow: 0 0 0 35px rgba(255, 255, 255, .2);
background-color: #FFF;
color: #999;
border-radius: 0!important;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
padding: 15px 10px 10px;
}
.hero .hero-form-container .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
margin: 2px 0 0;
padding: 5px 0;
}
.hero .hero-form-container .dropdown-menu>li>a {
display: block;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
padding: 3px 20px;
}
.hero .hero-form-container ul {
width: 250px;
top: 91px;
border-radius: 0;
border: none;
background-color: #FFF;
color: #999;
padding: 0;
}
.hero .hero-form-container ul li a:hover {
background-color: #99d425;
font-family: Proxima Nova Thin;
font-size: 14px;
color: #999;
padding: 5px 5px 5px 15px;
}
.hero .hero-form-container ul li a {
font-family: 'Proxima Nova Thin';
font-size: 14px;
color: #999;
text-decoration: none;
padding: 5px 5px 5px 15px;
}
<div class="row">
<div class="col-sm-6 pull-left"><img id="nats-logo" style="" src="img/nats-logo-red.png" alt=""></div>
<div class="col-sm-6">
<div class="hero">
<div class="hero-form">
<div class="dropdown hero-selection">
<h5>Select your utility below:</h5>
<h2 style="margin-top: 20px">My Electricity Utility is:</h2>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true"> Select One<span class="caret"></span> </button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="notlisted" class="is-active">[not listed]</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="EBG">BGE</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="CNM">Delmarva Power (MD)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="PED">Pepco (DC)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="PEM">Pepco (MD)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="APM">Potomac Edison</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" value="SME">SMECO</a></li>
</ul>
</div>
<form action="https://one.wglenergy.com/portal/rc_engine_by_ldc.php" id="form1">
<input type="hidden" name="super_rc" value="NATS">
<input type="hidden" name="cust_type" value="RES">
<input type="hidden" name="ldc_g" id="ldc_g">
<input type="hidden" name="ldc_e" id="ldc_e">
<input type="submit" id="go-button" value="See Your Pricing">
</form>
</div>
</div>
</div>
</div>
</div>
I'm using bootstrap popovers in a project of mine, and I've encountered a problem with them. My popover is being pushed up because it hits the bottom of my visible screen, but when I scroll down, it doesn't move down aswell to align with the arrow.
Here's a picture of it happening live, see I've scrolled down but it doesn't move down with me.
EDIT: Code
$(document).ready(function(){
$("[data-toggle=popover]").popover({
trigger: 'hover',
html: true
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<style>
.popover {
border-radius: 0;
border: none;
background: none;
}
.popover.bs-popover-right .arrow::after {
border-right-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-left .arrow::after {
border-left-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-top .arrow::after {
border-top-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-bottom .arrow::after {
border-bottom-color: rgba(0, 80, 173, 0.8);
}
.popover.bs-popover-auto[x-placement^=bottom] .popover-header::before,
.popover.bs-popover-bottom .popover-header::before {
border-bottom: 1px solid rgba(0, 80, 173, 0.8);
}
.popover-header {
padding: 18px 23px;
border-radius: 0;
color: #fff;
background: rgba(0, 80, 173, 0.5);
border-bottom: 1px solid rgba(0, 80, 173, 0.8);
}
.popover-body {
padding: 19px 24px;
border-radius: 0;
color: #eaeaea;
background: rgba(0, 80, 173, 0.5);
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4" style="height: 120vh;">
<img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
<img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
<img style="width: 45%;" src="https://cdn2.littlethings.com/app/uploads/2017/05/cute-dog-yorkie-600x600.jpg" tabindex="0" role="button" data-toggle="popover" data-placement="left" title="idk" data-content="idk">
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
You might have an external css file which is overwriting the Bootstrap default css. (top:50%;) should work in the arrow div and need to ensure the parent div is (position: relative;) as well. The relative parent div will help the arrow div vertically middle alignment (top:50%;) as per content.
I am trying to make a horizontal unordered list <ul> with four columns in each row.
The number of list items <li> is dynamic and could change during runtime.
Current Code and result
ul {
-webkit-columns: 4; /* Chrome, Safari, Opera */
-moz-columns: 4; /* Firefox */
columns: 4;
display: block;
}
ul li {
margin: 20px ;
padding: 10px;
text-align: center;
color: white;
display: list-item;
}
which gives me this:
The list is not really horizontal since the second element (Green) is under the first one (Blue) and next to it, but the order doesn't matter in my case.
The problem is that the padding of the element is wrapping to the next column.
Any suggestions?
JSfiddle: here
Try below code
Demo
<ul id = "list">
<li style="background-color: rgb(51, 70, 115);">1</li>
<li style="background-color: rgb(156, 78, 129);">2</li>
<li style="background-color: rgb(121, 159, 59);">3</li>
<li style="background-color: rgb(51, 70, 115);">4</li>
<li style="background-color: rgb(51, 70, 115);">5</li>
<li style="background-color: rgb(121, 159, 59);">6</li>
<li style="background-color: rgb(156, 78, 129);">7</li>
<li style="background-color: rgb(156, 78, 129);">8</li>
</ul>
#list {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; /*3 is just placeholder -- can be anything*/
}
#list li {
display: inline-block;
margin-bottom: 20px;
padding:10px 80px;
}
You can do this with the break-inside property.
ul {
-webkit-columns: 4;
/* Chrome, Safari, Opera */
-moz-columns: 4;
/* Firefox */
columns: 4;
display: block;
list-style: none;
}
ul li {
margin: 20px;
padding: 10px;
text-align: center;
color: white;
min-height: 50px;
display: list-element;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
}
<ul>
<li style="background-color: rgb(51, 70, 115);">1</li>
<li style="background-color: rgb(121, 159, 59);">2</li>
<li style="background-color: rgb(133, 50, 104);">3</li>
<li style="background-color: rgb(75, 93, 135);">4</li>
<li style="background-color: rgb(151, 187, 93);">5</li>
<li style="background-color: rgb(156, 78, 129);">6</li>
</ul>
Here is other alternative to your approach using JS and Flexbox. First you group each 4 li elements with wrapper element and then you use flexbox to create 4 column layout.
$('ul').each(function(){
var divs = $('li', this);
console.log(divs)
console.log(divs.slice(0,4));
for(var i = 0; i < divs.length; i+=4) {
console.log(i)
divs.slice(i, i+4).wrapAll('<li class="wrapper"><ul></ul></li>');
}
});
ul {
padding: 0;
margin: 0;
}
.wrapper ul {
display: flex;
flex-direction: row;
}
.wrapper ul li {
flex: 1;
margin: 10px;
padding: 10px;
color: white;
min-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li style="background-color: rgb(51, 70, 115);">1</li>
<li style="background-color: rgb(121, 159, 59);">2</li>
<li style="background-color: rgb(133, 50, 104);">3</li>
<li style="background-color: rgb(75, 93, 135);">4</li>
<li style="background-color: rgb(151, 187, 93);">5</li>
<li style="background-color: rgb(156, 78, 129);">6</li>
<li style="background-color: rgb(75, 93, 135);">4</li>
<li style="background-color: rgb(151, 187, 93);">5</li>
<li style="background-color: rgb(156, 78, 129);">6</li>
<li style="background-color: rgb(51, 70, 115);">1</li>
<li style="background-color: rgb(121, 159, 59);">2</li>
<li style="background-color: rgb(133, 50, 104);">3</li>
<li style="background-color: rgb(75, 93, 135);">4</li>
<li style="background-color: rgb(151, 187, 93);">5</li>
<li style="background-color: rgb(156, 78, 129);">6</li>
<li style="background-color: rgb(75, 93, 135);">4</li>
</ul>
You can add min-height to that <li> , it may solved your problem :-
ul li
{
margin: 20px ;
padding: 10px;
text-align: center;
color: white;
min-height:20px;
}
Can someone please provide help with my script & teach me why my content panels don't switch with the added script to add the 'selectedTab' class? They switch fine when I remove the script altogether. I tried removing the 'active' class from Home which obviously didn't work. Sorry I'm so clueless. thanks in advance for your help.
<style>
/*Selected Tab*/
.selectedTab {
background-color:#CBD8E1;;
border-left: 1px solid rgb(69, 145, 193);
border-top: 1px solid rgb(69, 145, 193);
border-right: 1px solid rgb(69, 145, 193);
border-bottom: nonet;
color: rgb(69, 145, 193);
line-height: 0.5em;
padding: 8px 10px;
}
/*Non-Selected Tab*/
.notSelectedTab {
border: 1px solid rgb(69, 145, 193);
border-bottom: none;
background-color: rgb(69, 145, 193);
color: rgb(255, 255, 255);
line-height: 0.5em;
margin-top: -1px;
padding: 8px 10px;
}
</style>
<script>
$( document ).ready( function() {
$('ul.nav li a').click(
function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation(); // stop the click from bubbling
$('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab');
$(this).addClass('selectedTab').removeClass('notSelectedTab');
});
});</script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a class="selectedTab" href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a class="notSelectedTab" href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a class="notSelectedTab" href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a class="notSelectedTab" href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="profile">Profile</div>
<div class="tab-pane" id="messages">Messages</div>
<div class="tab-pane" id="settings">Settings</div>
</div>