How to add arrow bootstrap navbar brand - html

How do you add an arrow using css to the navbar brand (see image example)
The arrow should not be visible when in mobile view.
The following doesn't work - clearly I'm not the best at css.
.navbar-default {
.navbar-brand {
position: relative;
float: left;
margin-right:30px;
color: #navbar-default-brand-color;
&:hover,
&:focus {
color: #navbar-default-brand-hover-color;
background-color: #navbar-default-brand-hover-bg;
}
&:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 12px solid #brand-secondary;
position: absolute;
top: 50%;
margin-top: -19px;
left: 100%;
z-index: 3;
}
&:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 12px solid white;
position: absolute;
top: 50%;
margin-top: -19px;
margin-left: 1px;
left: 100%;
z-index: 3;
}
#media (max-width: #grid-float-breakpoint) {
}
}
}
the html is as follows
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" type="button">
<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="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Getting started
</li>
<li>
CSS
</li>
<li>
Components
</li>
<li>
Javascript
</li>
<li>
Customize
</li>
</div>
</div>
</nav>
Update: I've managed to get it working using the before and after css. How do I overide this css with the media query i.e whats the css that goes inside the media query to remove it on a mobile device?

have created a small fiddle with example code of how to do this for list items. It can be edited slightly and re-applied to your code to achieve the desired affect.
It's all about the :before and :after selectors.
http://jsfiddle.net/dgc6ajbL/

Related

Bootstrap li item remeins highlighted in white after visited

I am facing the problem when the Bootstrap item is remaining white background color after being visited. Here is the Html
.my-mail{
background-color: transparent;
cursor:pointer ;
}
.nav-mail:hover:not(.active){
border-left: #007f7e 1px solid;
border-right: #007f7e 1px solid;
color: #007f7e;
/*background-color: transparent;*/
cursor: pointer;
}
.nav-mail:active{
color: white;
cursor: text;
/*background-color: transparent;*/
border-left: transparent 1px solid;
border-right: transparent 1px solid;
border-left: none;
}
.nav-mail:visited{
/*color: white;*/
cursor: text;
background-color: transparent;
border-left: transparent 1px solid;
border-right: transparent 1px solid;
}
.nav-logo:hover{
cursor: pointer;
}
.nav-mail-icon{
font-size: 15px;
background-color: transparent;
cursor: pointer;
}
a:active {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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 id="navbar" class="navbar navbar-fixed-top">
<div class="container-fluid" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="nav-logo" href="#1"><img class="img-responsive header-logoIMG center-block" src="Images/header/LOGO.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navigation" id="myList">
<li class="nav-btn active">Home</li>
<li class ="nav-btn">About Us</li>
<li class ="nav-btn">Our projects</li>
<li class ="nav-btn">Cooperation</li>
<li class ="nav-btn">Services</li>
<li class ="nav-btn">Contacts</li>
<li class = "nav-item my-mail"><i class="glyphicon glyphicon-envelope nav-mail-icon"></i></li>
</ul>
</div>
</div>
</nav>
In the code above instead of MyEmail link I have my real email. This is the only item that remains highlighted after being visited. I am sure it has something to do with the bootstrap navbar as I have another element with same link mailto and it works fine.
If you have any Ideas what is wrong, please help.
If youll follow the example:https://jsfiddle.net/borovec/aq9Laaew/272810/
you can see that there is a same problem if youll open the menu and press on any item except home, it will remain the white background color.
Thanks in advance!
Try this
.nav >li>a:focus {
background-color: transparent;
}
I think you just need to set css for :focus
like..
li a:focus {
background-color: rgba(0,0,0,0) !important;
border:none !important;
}

z-index on hover with bootstrap img-responsive class

Newb here. I am building a site, and on this site I am displaying overlapping images. Therefore, I am using the z-index on hover so that the behind image comes forward when hovered over. However, I am also using bootstrap and the img-responsive tag and when I hover, the image flickers and then disappears. How can I fix this? Is it possible to handle this in only HTML/CSS, no Java?
#container1 {
position: absolute;
top: 25%;
left: 35%;
}
#container1 img:hover {
z-index: 3;
position: absolute;
}
#container2 {
position: absolute;
top: 30%;
left: 25%;
}
#container2 img:hover {
z-index: 2;
position: absolute;
}
#container3 {
position: absolute;
top: 45%;
left: 40%;
}
#container3 img:hover {
z-index: 1;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<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="#">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li>works
</li>
<li>about
</li>
<li>contact
</li>
</ul>
</div>
</div>
</nav>
<div id="container">
<div id="container1">
<img src="http://placehold.it/300x300?text=1" class="img-responsive">
</div>
<div id="container2">
<img src="http://placehold.it/300x300?text=2" class="img-responsive">
</div>
<div id="container3">
<img src="http://placehold.it/300x300?text=3" class="img-responsive">
</div>
<div>
I there.
The reason why the images flickers is because you are setting the images to be position absolute on hover and it has a static position by default.
If you set alle the images to be position relative from the beginning, and also removes the position attribute on hover, it will work. You do not need position absolute on the images because you have it on the parent container. (unless you are trying to do more I don't know of)
Hope this helps :)
Se working example here
#container1 img, #container2 img, #container3 img{
position: relative; /* Added this */
border: 1px solid red;
}
#container1 {
position: absolute;
top: 25%;
left: 35%;
}
#container1 img:hover {
z-index: 3;
/* Removed: position: absolute; */
}
#container2 {
position: absolute;
top: 30%;
left: 25%;
}
#container2 img:hover {
z-index: 2;
}
#container3 {
position: absolute;
top: 45%;
left: 40%;
}
#container3 img:hover {
z-index: 1;
}

Remove extra white space from top in firefox

Certain portions of the page looks different in firefox than chrome.
This is what it looks like in chrome:
This is what it looks like in firefox:
HTML code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
margin-top: 0;
padding-top: 0;
overflow-x: hidden;
}
#media print {
body {
margin-top: 0 !important;
}
}
body {
background-color: white;
color: black;
padding: 0;
margin: 0;
min-height: 100%;
min-width: 100%;
overflow-x: hidden;
}
.rowa {
padding: 10px;
background-color: black;
color: white;
height: 100%;
margin: 0;
}
#title {
font-size: 36px;
display: inline-block;
color: white;
}
<nav class="navbar navbar-inverse " id="navtop">
<div class="container-fluid rowa">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="title">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right menu " id="menu1">
<li> Home
</li>
<li> Booking
</li>
<li>Rates
</li>
<li> About us
</li>
<li> Contact us
</li>
</ul>
</div>
</div>
</nav>
I am not able to remove the extra space from top and the extra padding within the nav-bar.
I have set margin and padding to 0 for html and body in css, and min-width and min-height is 100%.
Also there is extra spacing between an image and form in firefox (for small screen devices).
How to I get rid of these extra spaces in firefox? Please help.
Adjust using height rule in CSS to id="menu1".

bootstrap css searchbox not fit in navigation bar

In my jsp page I want to put searchbox in the navigation bar items.
So I have done below code,click in the link(jsfiddle code).
jsfiddlecode link
But the problem is,search bar is not fit into the navigation bar itmes,when it is in mobile view. why it is not fit into the navigation bar??
You can place the button and the search form inside the navbar-header div so it won't become mixed in with the mobile navbar when the toggle button is clicked since it's currently included inside the nav links. Then you just need to adjust the placement of the toggle button.
*I also adjusted your navbar-nav since it's overlapping the search button at certain widths.
See working example Snippet.
$('#buttonsearch').click(function() {
$('#formsearch').slideToggle("fast", function() {
$('#content').toggleClass("moremargin");
});
$('#searchbox').focus()
$('.openclosesearch').toggle();
});
body {
padding-top: 70px;
}
.searchbardiv {
display: block;
position: fixed;
background: #7D1935;
top: 50px;
right: 0px;
width: 100%;
max-width: 100%;
padding: 10px;
margin: 0px;
}
#formsearch {
display: none;
}
.buttonsearch {
position: fixed;
color: white;
top: 15px;
right: 10px;
background-color: transparent;
border: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.buttonsearch:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0px;
}
.buttonsearch:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: none;
border: 0px;
}
.glyphicon.glyphicon-search {
font-size: 18px;
}
#searchbox {
box-shadow: none;
padding: 8px 14px;
}
#searchbox:hover {
box-shadow: none;
}
.form-control:focus {
border-color: #ccc;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
margin-right: 10px;
}
}
#media (max-width: 767px) {
.navbar .navbar-toggle {
margin-right: 50px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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="#">MyCompany</a>
<button type="button" class="buttonsearch" id="buttonsearch">
<i class="glyphicon glyphicon-search openclosesearch"></i>
<i class="glyphicon glyphicon-remove openclosesearch" style="display:none"></i>
</button>
<form role="search" method="get" class="searchbardiv" id="formsearch">
<div class="input-group">
<input type="text" id="searchbox" class="form-control" name="s" id="s">
<div class="input-group-btn">
<button class="btn btn-default" id="searchsubmit" type="submit">
<strong>Search</strong>
</button>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
link1
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="well">
Content
</div>
</div>
You can write media css for phone ..just add
#media (max-width: 767px) {
#buttonsearch{
margin-right:20%;
}
}
It will do margin-right to Landscape phone , portrait tablet to phone

Wedge shaped menu

I've been digging into how to create a wedge shaped menu and came across the following stackoverflow post: Diagonal Wedge Shaped CSS - Edge to Edge Centered in Browser
I've re-purposed the example image Varazi drew up to better explain my own situation (please excuse the old writing on it). I've added 2 menu items, home and contact, to show what I'm trying.
The code I have been playing around with (found from the above link).
HTML
<div class="shape">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS
.shape {
width:400px;
margin:0 auto;
}
.top {
height:0;
border-width:0 0 150px 400px;
border-style:solid;
border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
height: 50px;
background-color:#d71f55;
}
/* Support transparent border colors in IE6. */
* html .top {
filter:chroma(color=#123456);
border-top-color:#123456;
border-left-color:#123456;
}
Update: After playing quite a lot with it, really fun challenge I must say, I have finally gotten it exactly the way I needed it to be with the helpful tip by Talkingrock (thanks man!). My remaining challenge would be showing the .sub-menu inside an overflow: hidden element (#masthead), but it's not overly important as I can have the links plastered on the homepage in the relevant content sections.
Hope the below code helps a poor soul out, such as myself, who needed help. Enjoy! :)
HTML (I'm using WordPress/Bootstrap)
<header id="masthead" class="site-header" role="banner">
<nav id="site-navigation" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="http://demo.dev/" title="demo" rel="home">
<img width="159" height="134" src="http://demo.dev/wp-content/uploads/2014/10/logo.png" class="img-responsive" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menu-main-menu" class="nav navbar-nav pull-right">
<li>Home</li>
<li>About Us</li>
<li>Services
<ul class="sub-menu">
<li>Industrial Electrical</li>
<li>Commercial Electrical</li>
<li>Domestic Electrical</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
CSS (using Less)
/* --- header */
#masthead {
overflow: hidden;
position: relative;
bottom: 50px; height: 200px;
background: red;
transform: skew(0deg, -3deg);
}
/* --- main navigation */
#site-navigation {
position: relative;
bottom: -50px;
height: 100%;
margin-bottom: 0;
border-radius: 0;
background: none;
border: none;
transform: skew(0deg, 3deg);
.container,
.navbar-collapse {
height: 100% !important;
}
.nav {
height: 100%;
&>li {
height: 100%;
&>a {
height: 100%;
padding: 80px 15px 0;
color: #fff;
}
&.current-menu-item,
&:hover {
&>a {
background-color: #tree-poppy;
}
}
}
}
}
Update2: Just wanted to quickly mention you can also attach the wedge part to an existing element easily without using any additional elements as well!
CSS
#masthead:after {
content: "";
position: absolute;
top: -45px; left: 0;
z-index: -1;
width: 100%; height: 80px;
background-color: red;
transform: skew(0deg, -3deg);
}
Here's what I came up with:
The HTML:
<header>
<nav>
Home
Contact
About
</nav>
</header>
The CSS:
header {
overflow: hidden;
margin-top: -550px;
height: 850px;
margin-bottom: -50px;
}
nav {
width: 120%;
margin: 0 -10%;
transform: rotate(-12deg);
background: red;
padding: 0 10%;
overflow: hidden;
}
nav a {
color: #fff;
text-decoration: none;
display: block;
float: left;
transform: rotate(12deg);
background: purple;
padding-top: 500px;
padding-bottom: 1000px;
margin-bottom: -900px;
text-align: center;
width: 80px;
position: relative;
}
.link-1 {
top: -36px;
}
.link-2 {
top: -18px;
}
Here's a working example: http://codepen.io/btpoe/pen/GavLk
Please note that this would not work in IE8 or less and would need some sort of fallback.