I ran into a strange issue while building my wordpress site. All links that are inside the bootstrap buttons are not active in firefox.
What could cause this?
Here's the html output:
<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</button>
Here's the css:
.home #primary #home-more .btn {
background-image: url("../img/home-button-sprite-more.png");
background-repeat: no-repeat;
margin-right: 0px;
background-color: transparent;
padding: 13px 40px;
background-position: 20px 0px;
}
button.btn {
display: inline-block;
padding: 13px 24px;
margin-bottom: 0px;
margin-right: 10px;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: medium none;
border-radius: 0px 0px 0px 0px;
white-space: nowrap;
-moz-user-select: none;
}
Instead of,
<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</button>
You have to use,
<a href="http://domain.dev/?cat=4" name="View all News">
<button class="btn pull-right" role="button">
All News
</button>
</a>
Or,
<a href="http://domain.dev/?cat=4" title="View all News" class="btn pull-right">
All News
</a>
Try what #Devo has suggested else try this
<a class="btn btn-primary" href="http://domain.dev/?cat=4">All News</a>
Hope this helps.
Use this:
<div class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</div>
I think it should work
Related
I'm trying to make circular tabs menu using bootstrap 4. I have tried below code using buttons and displaying inline.
I have attached the expected out image below.So first button will be active by default. Only the active button background should have color. Remaining all should be in grey colour. Can any one let me know how to achieve that
Here is the code
h1 {
color: green;
}
.xyz {
background-size: auto;
text-align: center;
padding-top: 100px;
}
.btn-circle.btn-sm {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
font-size: 8px;
text-align: center;
}
.btn-circle.btn-md {
width: 50px;
height: 50px;
padding: 7px 10px;
border-radius: 25px;
font-size: 10px;
text-align: center;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 12px;
text-align: center;
}
<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.3.1/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>
<body class="xyz">
<button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
<button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
<button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
<button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
<button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
<button type="button" class="btn btn-light btn-circle btn-sm">White</button>
<button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>
</body>
</html>
You need some Javascript for this:
turn all buttons to gray on the first click i.e. add 'blank' class
turn the button that was clicked to blue i.e. add 'active' class
you had all types of classes to start off with, which is why !important is needed to force our color through... but for your requirement, you don't need all these colored classes
$(document).ready(function() {
$(".btn").click(function() {
$(".btn").each(function() {
($(this).hasClass('blank')) ? null: $(this).addClass('blank');
($(this).hasClass('active')) ? $(this).removeClass('active'): null;
});
$(this).addClass('active');
});
});
h1 {
color: green;
}
.xyz {
background-size: auto;
text-align: center;
padding-top: 100px;
}
.btn-circle.btn-sm {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
font-size: 8px;
text-align: center;
}
.btn-circle.btn-md {
width: 50px;
height: 50px;
padding: 7px 10px;
border-radius: 25px;
font-size: 10px;
text-align: center;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 12px;
text-align: center;
}
.btn.btn-sm.btn-circle.blank {
background: lightgray;
border-color: lightgray;
}
.btn.btn-sm.btn-circle.active {
background-color: blue !important;
border-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="xyz">
<button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
<button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
<button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
<button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
<button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
<button type="button" class="btn btn-light btn-circle btn-sm">White</button>
<button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>
</div>
I saw differences on my height's div between multiple browsers.
On Google chrome it works perfectly but on Safari, there is a difference as you can see on screenshots :
div-screen-chrome
div-screen-safari
Here is my code :
.player {
bottom: 0;
position: fixed;
width: 100%;
height: 55px;
background-color: grey;
color: white;
font-family: 'Oswald';
line-height: 50px;
}
.next-container {
position: relative;
float: right;
padding-right: 10px;
padding-left: 10px;
font-size: 15px;
height: 55px;
top: -53px;
max-width: 50%;
min-width: 20%;
background-color: #ffc107;
color: white;
line-height: 55px;
text-align: center;
}
<div class="player">
<div class="artist-title-infos">
<span class="cover"><img class="picture" src="http://my-cover" alt="cover"></span>
<div class="infos">
<button class="buttonPlayer notPlaying"><i id="iconPlayer" class="fas fa-play-circle"></i></button>
<button class="pausePlayer notPaused"><i id="iconPlayer" class="fas fa-pause-circle"></i></button>
<span class="artist">Now : </span>
<span class="title">Your song</span>
</div>
</div>
<div class="next-container">
<span class="next">Next : </span>
<span class="next next-songs-0">Your song 1</span>
<span class="next next-songs-1">, Your song 2</span>
<span class="next next-songs-2"> & Your song 3</span>
</div>
</div>
How to fix it ?
Thanks
Ok, I have this responsive nav in Bootstrap. When you minimize the window, the nav transforms and allows you to expand the content. But when you expand the content, the lines, background color and logo seem to look unprofessional? How do I fix? It doesn't look right....
.navbar {
background: #007BC4 !important;
padding: 10px !important;
}
.nav a {
color: white !important;
}
#sign_up {
position: absolute;
left: 100%;
top: 100%;
transform: translatex(-50%);
}
#email_form, #password_form {
padding: 5px;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
border: 1px solid #007BC4;
}
#login_button {
background: #0092ea !important;
border: 1px solid #005c93;
font-weight: bold;
font-size: 14px !important;
}
#login_button:hover {
background: #007BC4 !important;
}
#remember_label {
color: white !important;
font-weight: normal !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
#forgot_password {
color: white !important;
position: relative;
left: 65px;
font-size: 13px !important;
}
#remember {
position: relative;
top: 2px;
}
.navbar-brand{
height:auto;
padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
#media (max-width:1000px) {
.navbar-header {
float: left;
width:25%;
}
.navbar-brand{
width: 100%;
margin-top: 12px;
padding:0;
}
}
#media (max-width:767px) {
.navbar-header {
float: left;
width:100%;
margin-left: 0 !important;
}
.navbar-brand{
width: auto;
margin-top: 0px;
}
.navbar-brand img {
max-width: 200px;
}
.navbar-nav {
width: 100%;
float: left;
margin: 7.5px 0;
}
.navbar-nav > li > a{
padding: 10px 0;
}
.navbar-form{
float: left;
}
#sign_up {
position: relative;
left: 50%;
top: 0;
width: 100%;
padding: 8px 0px;
}
#email_form, #password_form{
margin-bottom: 5px;
width: 100%;
}
#login_button{
width: 100%;
}
}
<!-- CSS Files -->
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>
<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> <button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button> </li>
</ul>
<!-- Login -->
<div class='navbar-form navbar-right'>
<form action='#' method='post'>
<input type='text' placeholder='Email' id='email_form'>
<input type='text' placeholder='Password' type='password' id='password_form'>
<button class="btn btn-primary btn-sm" id='login_button'>Login</button>
</form>
<input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
<a href='#' id='forgot_password'> Forgot Password? </a>
</div>
</div>
</div>
</div>
<!-- JS Files -->
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
I would remove the navbar-form class, and then a few small tweaks to make the top border transparent:
http://www.codeply.com/go/MVehZfspvB
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button button="" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="img-responsive">
</a>
</div>
<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">
<button class="btn btn-success btn-sm" id="sign_up"> Sign Up </button>
</a>
</li>
</ul>
<!-- Login -->
<div class="navbar-right">
<form action="#" method="post">
<input type="text" placeholder="Email" id="email_form">
<input type="text" placeholder="Password" id="password_form">
<button class="btn btn-primary btn-sm" id="login_button">Login</button>
</form>
<input type="checkbox" name="remember" id="remember">
<label for="remember" id="remember_label"> Remember me </label>
Forgot Password?
</div>
</div>
</div>
</div>
I am trying to make a search field with a dropdown inside. I have been trying to use bootstrap's input group to give the illusion that the button is inside the field.
This is what I am trying to accomplish in the screenshot below:
This is what I have so far:
I am trying to figure out how to get the dropdown menu to move over to the far right of the search field and get that carrot to show as well.
Any tips on adjusting the position of the menu as well as making that dropdown button have no color on hover?
<div class="container div-cntr">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control input-lg" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
<ul class="dropdown-menu">
<li><input type="checkbox"/> Option 1</li>
<li><input type="checkbox"/> Option 2</li>
</ul>
</div>
</div>
<br />
<button type="button" class="btn btn-default btn-lg">Search</button>
</div>
</div>
-
.div-cntr {
left: 50%;
margin-left: -350px;
margin-top: -150px;
min-height: 150px;
position: absolute;
text-align: center;
top: 50%;
width: 700px;
}
.filterOptions{
border-left: 0px;
}
.btn-lg {
line-height: 1.22;
}
#toolSearch:focus {
outline:none;
}
Here is a fiddle I have set up: https://jsfiddle.net/carlhussey/tfrpncu7/
Here is the CSS you need to accomplish what you indicated you wanted:
.dropdown-menu {
right: 0; /* Align dropdown-menu to right instead of left */
left: auto;
}
.input-group .dropdown-toggle.filterOptions {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */
}
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
background-color: transparent; /* Fix for dropdown-menu item hover background-color */
}
Here is what it looks like:
I went ahead and updated your Fiddle:
https://jsfiddle.net/tfrpncu7/3/
You should be using input-group-lg along with input-group and dropdown-menu-right to position the dropdown menu correctly. For the other CSS use pseudo elements.
Working Example: (The level of specificity is so the example works on Stackoverflow.)
.div-cntr {
margin-top: 100px;
text-align: center;
max-width: 700px;
/*for example only*/
background: red;
min-height: 300px;
/*for example only*/
}
.form .open>.dropdown-toggle.filterOptions.focus,
.form .open>.dropdown-toggle.filterOptions:focus,
.form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control,
.form .input-group.input-group-lg>.input-group-btn>.filterOptions {
border: 1px solid #ccc;
border-left: 0;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
background: #fff;
}
.form .dropdown-menu.dropdown-menu-search {
top: 60px;
right: 110px;
border-radius: 0;
border: 0;
background: #fff;
}
.form .dropdown-menu.dropdown-menu-search:after {
top: -15px;
right: 10px;
position: absolute;
content: '';
border-width: 0px 15px 15px 15px;
border-style: solid;
border-color: #fff transparent;
height: 0;
width: 0;
}
.form .form-control.toolSearch,
.form .form-control.toolSearch:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
border: 1px solid #ccc;
border-right: 0;
}
.form .input-group-btn .btn.btn-search,
.form .input-group-btn .btn.btn-search.active {
border-radius: 0;
border: 1px solid #ccc;
border-left: 0;
}
.form .input-group-btn .btn.btn-search:hover,
.form .input-group-btn .btn-search:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 1px solid #ccc;
border-left: 0;
border-radius: 0;
background: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container div-cntr">
<div class="form-group form">
<div class="input-group input-group-lg">
<input type="text" class="form-control toolSearch" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
<div class="input-group-btn">
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-search">
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabIndex="-1">
<input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabIndex="-1">
<input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabIndex="-1">
<input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabIndex="-1">
<input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabIndex="-1">
<input type="checkbox" /> Option 6</a>
</li>
</ul>
<button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here's a Fiddle with the position of the dropdown set, and the button with a white background on `:active'. Let me know if this is what you were looking for.
https://jsfiddle.net/tobyl/4p41p3kg/2/
Added CSS:
.dropdown-menu {
left: auto;
right: 0;
}
.open > .dropdown-toggle.btn-default:active, .open > .dropdown-toggle.btn-default:focus {
background-color: #fff;
}
I'll start by answering the second part of your question
Making that dropdown button have no color on hover
Chrome dev-tools (right click any element of the page and select Inspect element) can help a lot when it comes to styling elements under certain states (like hover). To see which style rule is applied during hover we can force the hover state on the button through dev-tools. We see that .btn-default is applying
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
Since this button has the following class precedence
<button class="btn btn-default btn-lg dropdown-toggle filterOptions"> (classes to the right override rules from classes to the left)
We can override the hover styles of .btn-default by making a rule for the hover state of filterOptions.
.filterOptions:hover {
background-color: white;
border-color: #ccc;
}
Adjusting the position of the menu as well as
Again by inspecting the dropdown element in dev-tools we can see that the correct style rule to override the default positioning and make the dropdown position to the right would be:
.open>.dropdown-menu {
right: 0;
left: initial;
}
Updated fiddle:
https://jsfiddle.net/tfrpncu7/4/
Remember, css has no scoping what so ever so it's a good idea to always apply new non-bootstrap classes when styling a specific element.
If your project is large, consider using a css naming convention like BEM to keep the risk of naming collisions low.
Im trying to center this button but can't seem to get it to work, any help is much appreciated.
<div class="cta-btn">
<a class="btn btn-cta text-center" href="#" role="button">EXPLORE</a>
</div>
And the CSS
.btn-cta{
padding: 25px 80px;
border: 3px solid white;
background-color: transparent;
color: white;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 1.4em;
transition: all 0.3s ease;
}
Put the .text-center class on the enclosing div
<div class="cta-btn text-center">
<a class="btn btn-cta" href="#" role="button">EXPLORE</a>
</div>
Also, if you want the button to fill the width of the div, add the .btn-block class to the button.
use class text-center
<div class="cta-btn text-center">
<a class="btn btn-cta text-center" href="#" role="button">EXPLORE</a>
</div>
Did you try adding text-align: center;
display: block;
margin: 0 auto;