Bootstrap css, how to make always visible navbar-toggle? - html

I'd like to add one of those buttons that are shown when on mobile device in order to open the collapsed menu in the navbar, but haven't been able so far, here's the less code and html
.navbar-toggle-always{
.navbar-toggle;
#media (min-width: 768px){
display: block!important;
}
.zero-margins;
}
html
<div class="pull-left ">
<button type="button" class="navbar-toggle-always collapsed" data-toggle="collapse" data-target="#left" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
upon further inspection I've noticed that the element is not hidden, it's just transparent, for some reason if I add
#media (min-width: 768px){
display: block!important;
background-color:pink;
}
i see it fine, but withouth the icon-bar bars or the borders. I'll keep working on it
and this is how I would like to show it:

After some tests I managed to obtain the desired results:
here's the less code:
.navbar-inverse {
.navbar-toggle-always {
border-color: #navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: #navbar-inverse-toggle-hover-bg;
}
.icon-bar-always {
background-color: #navbar-inverse-toggle-icon-bar-bg;
}
}
}
.navbar-toggle-always{
.navbar-toggle;
#media (min-width: 768px){
display: block!important;
background-color: transparent;
border:1px solid #333333;
}
.zero-margins;
.icon-bar-always {
.icon-bar;
border:1px solid #fff;
display: block;
border-radius: 1px;
}
.icon-bar-always + .icon-bar-always {
margin-top: 4px;
}
}
make sure you have at least 768px on the bottom right panel to see it:
http://jsfiddle.net/vyzwfovr/

Why not just add d-block class to toggler?
<button class="navbar-toggler d-block" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

I'm not sure if you want to add another one or is it enough to change the existing one. I case, you want to change the existing one, on a default/clean bootstrap install, this show do it:
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none !important;
}

In a normal bootstrap install, there is this line of css found in their generic css file:
.navbar-toggle { display:none; }
In order to get the button to always show, in your custom CSS you just need to add this line of code. If you have your stylesheet applied after theirs, it will overwrite it.
.navbar-toggle { display:block; } // the !important isn't necessary

The colors of the toggle and icon-bar are defined along with navbar-default as well as with navbar-inverse. So if you are trying to display them on a custom div, the colors are also removed along with the navbar-default/inverse color scheme.
Add this to your css:
.navbar-toggle {
background-color: transparent;
}
.icon-bar {
background-color:#333;
}

Add a custom class to your navbar-toggle, like navbar-toggle-visible and then add this rule to your css
#media (min-width: 768px) {
.navbar-toggle-visible {
display: inline;
}

Related

CSS to hover on specific classes

I would like the button to change color on hover when hovering anywhere in the nav bar (.topNav). In my current code, the change happens only when hover over the button (.top, .middle, .bottom classes). I got this to work using span, but that was changing all the spans in the .topNav class.
html...
<nav class="navbar-default"
<div class="topNav">
<div class="navbar-header">
<button type="button" class="navbar-toggle button_container collapsed"
[ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
....other content
</div>
</nav>
SCSS...
.top, .middle, .bottom {
background: white;
transition: 0.25s;
}
.topNav:hover, .button_container:hover, .top:hover, .middle:hover,
.bottom:hover {
background: black;
transition: 0.25s;
}
Here you go:
.topNav{
background: red;
}
.topNav:hover>.navbar-header>button {
background: black;
transition: 0.25s;
}
<nav class="navbar-default"><!-- OOPS YOU FORGOT TO CLOSE THIS TAG -->
<div class="topNav">
<div class="navbar-header">
<button type="button" class="navbar-toggle button_container collapsed"
[ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
....other content
</div>
</nav>
You forgot to close the nav tag.
.topNav:hover>.navbar-header>button means when you hover over .topNav select a specfic child element ( the button ). Then do stuff with that ( paint it black )
header a:hover{
color:#BFEFFF;
font-weight:bold;
}
Try something like this in the CSS code.
I use this on my webpage: http://www.kunalkolhe.com/
I have heard from experienced developers that using CSS for extensive projects is not a good Idea though.
FYI... I got this to work with two solutions...
1) Using the navbar-header class and span. Previously when I tried this same solution with the .button_container class (instead of navbar-header), it did not work. I still do not understand why.
Code using span...
.navbar-header span {
background: white;
transition: 0.25s;
}
.topNav:hover>.navbar-header span {
background: black;
transition: 0.25s;
}
2) Code using the three classes...
.top, .middle, .bottom {
background: white;
transition: 0.25s;
}
.topNav:hover>.navbar-header>button>.top, .topNav:hover>.navbar-header>button>.middle, .topNav:hover>.navbar-header>button>.bottom {
background: black;
transition: 0.25s;
}

How to hide button on desktop

I have a button on my website but i want it to be only available on mobile.
How can i hide it from my desktop site?
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
And here is the css
.button-menu-mobile {
background: transparent;
border: none;
color: #ffffff;
font-size: 21px;
line-height: 60px;
padding: 0px 15px;
Thanks :)
I am attaching a working code snippet, here if you go full screen, you won't be able to see the button.
Working Example
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
<div class="pull-right">
<button class="button-menu-mobile open-left">
<i class="ion-navicon"></i>
</button>
<span class="clearfix"></span>
</div>
You need to use media-queries for this purpose. set min-width according to your need.
#media(min-width: 900px)
{
.button-menu-mobile
{
display:none;
}
}
Code:
#media screen and (min-width: 600px) {
.pull-right {
visibility: hidden;
}
}

Changing part of navbar color

I have a navbar which is designed in Bootstrap 4 , I am trying to change the hamburger background-color of the navbar, and the rest of the navbar in some other color.
Here is the sketch of my current output and what I am trying to do:
I tried using z-index property but nothing seems to work. Can you give me any ideas?
.navbar {
padding-left: 80px;
height: 54px;
top: 40px;
flex-flow: row nowrap;
display: inline-flex;
border-bottom-right-radius: 200px;
border-top-right-radius: 200px;
background-color: #A6ACAF !important;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="lines"></span>
<span class="lines"></span>
<span class="lines"></span>
</button>
<h1 class="navbar-brand mb-0 move-header">NavBrand</h1>
<div class="collapse animated fadeInLeft" id="navbarNav">
<ul class="navbar-nav">#yield('setActive') </ul>
</div>
</nav>
If you want to change the hamburger background-color try applying the style on .navbar-toggler or .navbar-toggler-left class and not .navbar
.navbar-toggler {
background-color: red;
}
Updated:
Left of the button is still grey - has nothing to do with the background-color. Bootstrap by default has the following styles on .navbar-toggler-left
.navbar-toggler-left {
position: absolute;
left: 1rem; //this is getting that left gap
}
Override the above left: 1rem; to your own value which is 0
.navbar-toggler {
background-color: red;
left: 0; //fix
}
Adjust width & height of the toggler accordingly if you want.

How to hide or show correctly page element (with media query of pure css)?

I have two class:
.show{display:block; visibility: visible;}
.hide{display:hidden; visibility: hidden;}
My dilemma is when screen width greater than 768px, Media query makes .hide on some element effectively, The element will be gone. That's my expectance. But when screen width smaller than 768px, Mediq query makes .show on some inline-block element effectively and there is a issue. Because the disable:block of .show class modify the element's model box.
Simply illustrate:
<span></span><span></span><span></span><span></span>
Add the .show will be turned:
<span></span>
<span></span>
<span></span>
<span></span>
How do I avoid change the model box when I want a element be visible?
UPDATE:
I have a answer not yet test.
.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}
Not only display can be achieved it.
you can use visibility height. Like this:
.show{visibility: visible;height: auto;}
.hide{visibility: hidden; height: 0;}
I'd go with for inline elements
.show {display:inline;}
.hide {display:none;}
Or for CSS3 only .show {display:initial;}
Another option would be to code around you're elements, but it gets messy
.hide {display:none;}
.show {display:inline;}
a.show, span.show, ...etc {display:inline;}
td.show {display:table-cell;}
You can see where this is headed.
You're better off just removing the .hide class than adding the .show class as well. By just removing the hide class or adjusting your media query, the element should rever to its natural state.
Update as you mention media queries, perhaps this is more of an example of what you are after:
#media screen and (max-width: 50em) {
.hideNarrow {display:none;}
}
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
<span>Will Stay</span>
<span class="hideNarrow">Will go</span>
PLay with it here where you can slide the page width: http://jsfiddle.net/of2yc9nu/2/
try:
.show {
display: inherit;
}
try this
.hide {
display: none;
}
.show {
display: inline-block;
}
<span class="show">1</span>
<span class="hide">2</span>
<span class="show">3</span>
<span class="hide">4</span>
<span class="show">5</span>
.show{
visibility : visible;
height: auto;
}
.hide{
visibility : hidden;
height: 0;
}
<span class="show">Span1</span>
<span class="show">Span2</span>
<span class="hide">Span3</span>
<div class="show">div1</div>
<div class="show">div2</div>
This will work.

How can I make 2 elements share the same rollover state in CSS?

I want a button composed of some text and an icon next to it. I can specify that each has a :hover state in CSS to change its appearance, but how can I arrange my CSS/HTML such that rolling over the text appears to also change the image hover state, and vise versa?
Preferably avoiding JS.
Update: The current state of my fiddling around...
<a class="close"><div class="closebutt"></div></a>
a.close {
float:right;
font-size:12px;
color: #a7dbe6;
text-decoration:underline;
}
a.close:hover {
color: #fff;
}
a.vs_rewardClose:before {
content:"Close "
}
.closebutt {
background: url(images/close.gif) no-repeat;
display:inline-block;
width:14px;
height:14px;
}
.closebutt:hover {
background-position: 0px -14px;
}
With your HTML, changing the background-position of the div is just a matter of:
.close:hover > .closebutt {
background-position: 0px -14px;
}
In this way, the background-position changes only when its parent gets hovered.
This is the original answer I posted before you updated your question:
I usually organize my HTML in this way
<a href="#" class="button">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
EDIT: as #Paul D. Waite notes in the comments, this HTML structure is invalid in HTML4 because an a can contain only inline elements. So, to fix this we can change the structure in this way, having spans as children of the a. The CSS remains the same, eventually adding display: block if needed.
<a href="#" class="button">
<span class="glyph"></span>
<span class="text">Button text</span>
</a>
and your CSS in this way:
.button {
/* .. general style */
}
.button > .glyph {
/* .. general style for the glyph, like size or display: block */
background-image: url('..');
background-repeat: no-repeat;
background-position: left top;
}
.button > .text {
/* .. general style for the text, like font-size or display: block */
text-decoration: none;
}
.button:hover > .glyph {
/* .. change the glyph style when the button is hovered */
background-position: left bottom;
}
.button:hover > .text {
/* .. change the text style when the button is hovered */
text-decoration: underline;
}
In this way you can also change the style adding a new class to the button, in this way:
<a href="#" class="button red">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
<a href="#" class="button gray">
<div class="glyph"></div>
<div class="text">Button text</div>
</a>
And the CSS
.button.red {
background-color: red;
}
.button.red > .text {
color: black;
}
.button.gray {
background-color: darkgray;
}
.button.gray > .text {
color: white;
}
Enclose both in one element and add :hover to this element:
.parent:hover > .text { your hover state}
.parent:hover > .icon { your hover state}