Hello all i have this navigation working on. Everything is OK desktop mode but in mobile the nav breaks. can this propblem be solve if I use the #media css option on the header div.
Please see the following code fo the nav menu:
Please also note that i am using bootrap cdn.
<span class="header-info phone"><i class="fa fa-phone fa-lg"></i> Call Us: 0800 123 456 789</span> <span class="header-info email"><i class="fa fa-envelope-o fa-lg"></i> mail#yoursite.com</span>
</div>
<div class="navbar-header"><a class="navbar-brand" href="#">TAJ</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>Products
</li>
<li class="dropdown">About Us <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>Test2
</li>
</ul>
</li>
<li class="dropdown">Contact Us <b class="caret"></b>
<ul class="dropdown-menu" role="menu">
<li>About
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Please see CSS for the nav menu.
.top_header{
border-bottom: 1px solid #3bbbbc;
}
.header-info{
color:999999 !important;
}
.header-info{
line-height: 50px;
padding: 0 30px 0 0;
font-size: 13px;
}
.top_header{
min-height: 50px;
}
#bst-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(119, 119, 119, 1);
}
#bst-bootstrap-menu.navbar-default {
font-size: 14px;
background-color: rgba(255, 255, 255, 1);
height: 130px;
border-color: transparent;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
}
#bst-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(68, 68, 68, 1);
background-color: rgba(248, 248, 248, 0);
}
#bst-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#bst-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(59, 187, 188, 1);
background-color: transparent;
}
#bst-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#bst-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#bst-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(59, 187, 188, 1);
background-color: transparent;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #3bbbbc;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle:hover,
#bst-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #3bbbbc;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #3bbbbc;
}
#bst-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#bst-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #fff;
}
Please see images
Related
I'm using object-fit: cover; in my CSS to line up images on a page, because they need to be the same height. It works perfectly in most browsers however IE11 is distorting the images.
I read that I might be able to use #support to fix this but I don't understand how to do this? Or is there another option that I might be able to use?
The code I have used is below - would really appreciate any help.
.brands {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-gap: 1rem;
}
.brands__item img {
display: block;
/* Make sure max-width is added */
max-width: 100%;
height: 70px;
}
.brands__item img {
width: 130px;
height: 75px;
object-fit: contain;
}
.brands__item a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="row" style="padding: 10px 30px 40px;">
<hr style="border-color: #000000; border-width: 2px; width: 90px; margin-bottom: 10px;" />
<h5 style="text-align: center;font-size: 2.4rem;margin-bottom:30px;">Trending now</h5>
<ul class="brands">
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/steel-blue-logo-148x75.png" alt="Steel Blue logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/dewalt-logo-103x45.png" alt="Dewalt logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/3m-logo-105x55.png" alt="3M logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/bahco-logo-125x75.png" alt="Bahco logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/honeywell-logo-211x40.png" alt="Honeywell logo" />
</a>
</li>
<li class="brands__item">
<a href="#">
<img src="https://static.prd.echannel.linde.com/wcsstore/UK_BOC_Industrial_Ntl_Store/images/metabo-logo-166x65.png" alt="Metabo logo" />
</a>
</li>
</ul>
</div>
<!-- end -->
I test your code in IE 11 and the issue seems not only with object-fit.
CSS Grid part of your code doesn't work in IE 11.
You need to use -ms- prefix to elements such as display: grid, grid-column and grid-row.
grid-template-areas isn't supported, you can convert it to work with grid lines.
The repeat() notation doesn't work in IE 11. You need to write in all row and column lengths.
object-fit is not supported by IE 11. You can refer to this thread for the fix.
I use #media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {} to target IE 11 in CSS to add some codes for IE 11 to fix the issue. The added code is like below:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.brands__item img {
width: 130px;
height: auto;
max-width: 100%;
max-height: 100%;
}
.brands {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
li:nth-of-type(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
li:nth-of-type(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
li:nth-of-type(3) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
li:nth-of-type(4) {
-ms-grid-column: 4;
-ms-grid-row: 1;
}
li:nth-of-type(5) {
-ms-grid-column: 5;
-ms-grid-row: 1;
}
li:nth-of-type(6) {
-ms-grid-column: 6;
-ms-grid-row: 1;
}
}
I want to add search box to my navbar but not as the traditional way as appears in the picture , I want to add a search icon button in the navbar only and when user click on it the search box appears under the search icon .
How can i do this any one can help me please ?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact US</li>
<li class="dropdown">
Who we are <b class="caret"></b>
<ul class="dropdown-menu">
<li>About</li>
<li> Mession</li>
<li> Vision</li>
<li class="divider"></li>
<li>Goals</li>
</ul>
</li>
<li>Publications</li>
<li>Media</li>
<li>Partners</li>
</ul>
There are lot of things on the net e.g https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Run below code:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('https://www.w3schools.com/howto/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<p>Animated search form:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
You can try these snippets.
Solutuion with CSS Only:
.hide
{
opacity: 0;
max-height: 0;
}
#trigger {
position: absolute;
left: -999em;
}
#container input[type="checkbox"]:checked + div
{
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
}
<div id="container">
<label for="trigger">click me for Search</label>
<input type="checkbox" id="trigger">
<div class="hide">
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div>
Solution with JS:
function myFunction() {
if (document.getElementById("form").style.display === "none") {
document.getElementById("form").style.display = "block";
} else {
document.getElementById("form").style.display = "none";
}
}
button {
width: 50px;
height: 50px;
}
<p>show and hide search</p>
<button onclick="myFunction()"></button>
<form id="form">
<input type="text" name="search" placeholder="Search..">
</form>
I'm developing a website where I have to put a bootstrap carousel and different texts over this carousel (absolute element).
Once I put the carousel on the website, all the texts become blurry and difficult to read.
I've read the could a problem between z-index of the text and z-index of the carousel but I'm not getting how I can solve it because I have to keep this text over the carousel.
Here the image of what I'm developing:
Here my code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 top-header-container">
<ul>
<li>UK 33333</li>
<li>IRELAND 333333</li>
<li>CANADA 333333</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 background-img-slide" style="z-index: -10px;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="logo-wrap">
<div class="logo-container">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/deane-logo.png"></a>
</div>
</div>
<nav class="main_menu_container">
<ul class="main_menu_class">
<li>About us</li>
<li>Services</li>
<li>Projects</li>
<li>Policies</li>
<li>Contact us</li>
</ul>
</nav>
<div class="slide-title-blue-wrap">
<div class="slide-title-blue-container">
<span class="slide-title-blue">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-red-wrap">
<div class="slide-title-red-container">
<span class="slide-title-red">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-green-wrap">
<div class="slide-title-green-container">
<span class="slide-title">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
</div>
CSS
.top-header-container {
text-align: right;
position: relative;
z-index: 2;
}
.top-header-container > ul {
margin: 0;
padding: 0;
}
.top-header-container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
font-size: 13px;
}
.main_menu_container {
text-align: right;
position: absolute;
width: 58%;
right: -110px;
top: 55px;
}
.main_menu_container > ul {
margin: 0;
padding: 0;
padding-right: 150px;
background: #76bd21;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.main_menu_container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.main_menu_container > ul > li > a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
.main_menu_container > ul > li > a:hover {
text-decoration: none;
}
.logo-wrap {
position: relative;
margin-top: -835px;
margin-left: -35px;
}
.logo-container {
position: absolute;
left: -450px;
background: rgba(255, 255, 255, 0.82);
height: 800px;
width: 50%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.navbar-brand {
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.logo-img {
position: absolute;
left: 110px;
top: 40px;
}
.background-img-slide {
position: relative;
margin-top: -100px;
background-image: url(assets/img/image-home-main.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 850px;
}
.slide-title-blue-wrap {
position: relative;
}
.slide-title-blue-container {
position: absolute;
left: -689px;
top: -7px;
background: rgba(5, 34, 162, 0.85);
height: 700px;
width: 60%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
z-index: 15;
}
.slide-title-blue {
position: absolute;
top: 70%;
left: 65%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
color: #fff;
}
.slide-title-green-wrap {
position: relative;
}
.slide-title-green-container {
position: absolute;
left: -881px;
top: 835px;
background: rgba(118, 189, 33, 0.85);
height: 800px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 10;
}
.slide-title-red-wrap {
position: relative;
}
.slide-title-red-container {
position: absolute;
left: -410px;
top: 693px;
background: rgba(5, 34, 162, 0.85);
height: 142px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 15;
}
.slide-title-red {
position: absolute;
top: 40%;
left: 50%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
color: #fff;
}
Blurry text (with carousel)
Clear text (without carousel)
Here link of my test website:
http://www.matrix-test.com/roofing/
Any Idea to solve this problem?
I've been able to resolve this issue in Bootstrap 4 by setting the backface-visibility attribute of the carousel-item to unset.
Here's the code.
.carousel-item {
-webkit-backface-visibility: unset!important;
backface-visibility: unset!important;
}
I am trying to find a way to have a logo above my navbar. For the desktop version of my site, it is not a problem, but opening the page on a mobile device, makes some problems. As soon as the navbar is collapsed, toggling does not move the main content down. So the uncollapsed navbar overlaps some parts of the content.
This is my code:
header[role="banner"] #logo-main {
}
#logo-main {
margin: auto;
position: absolute;
top: 8%;
left: 37.5%;
width: 340px;
height:130px;
}
.headercontainer {
background-image: url('https://images.pexels.com/photos/418147/pexels-photo-418147.jpeg');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 0;
padding-top: 47.2%; /* (img-height / img-width * container-width) */
/* (827 / 1752 * 100) */
}
#navbar-primary.navbar-default {
position: absolute;
top: 20%;
left: 15%;
padding-top: 100px;
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: inline-block;
float: none;
text-transform: uppercase;
font-family: 'Open Sans';
font-size: 16pt;
font-weight: 400;
letter-spacing: 1.5px;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color:black;
padding-left: 85px;
padding-right: 85px;
}
#navbar-primary.navbar-default .navbar-nav > li > a:hover {
color:black;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a > span {
padding-bottom: 5px;
border-bottom: 2px solid black;
}
.navbar-nav a:hover span {
padding-bottom: 5px;
border-bottom: 2px solid black;
/*background-image: url("../images/blackdot.png");
background-repeat: repeat-x;
background-position: center 100%;*/
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://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>
<div class="headercontainer">
<header role="banner">
<img id="logo-main" src="https://cdn3.iconfinder.com/data/icons/black-white-social-media/32/logo_social_media_phone-2-512.png" alt="Spurwandel">
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<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="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="noleftpadding">Home</span></li>
<li><span class="noleftpadding">About</span></li>
<li><span class="noleftpadding">Coachings</span></li>
<li class=""><span class="noleftpadding">Kontakt</span></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<span>Main Content</span>
</div>
</div>
</div>
You can find an example here: https://www.bootply.com/jQG65nqmRE
Thanks in advance.
Regards
Lars
Hi Friends i am using bootstrap 3 carousal. I am facing once problem in mobile when the mobile screen is <=4 inch. My slider's caption is hiding half on left side on the smaller screen. please help.
Code:
<div id="kc1" class="carousel " data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators hidden-xs">
<li data-target="#kc1" data-slide-to="0" class="active"></li>
<li data-target="#kc1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="websites">
<img class="img-responsive" src="img/full-responsive-websites-system-solutions1.jpg";text="Slide+0" alt="Slide 0">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-1 opa1 onee1" style="background-color:#004080;">
<h1 style="font-size:25px;">This is test example and half caption is hiding in left side on mobile device below <=4 inch screen </h1>
<h6>
More
</h6>
</div>
</div>
<div class="item" id="SEO-SEM">
<img class="img-responsive" src="img/seo-sem.jpg";text="Slide+1" alt="Slide 1">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-2" style="background-color:#000;">
<h2> This is test example and half caption is hiding in left side on mobile device below <=4 inch screen</h2>
<h6> More </h6>
</div>
</div>
</div>
<a class="left carousel-control" href="#kc1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#kc1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<style>
<!-- carousel css-->
.btn-clear {
color: #FFF;
border-color: #FFF;
border-width: 2px;
margin-right: 15px;
}
btn-clear:hover {
color: #000;
background-color: #6699CC;
}
#kc1
{
border-radius: 0px 0px 0px 0px; /* slider.css ln-17*/
/* added by kk */
overflow: hidden;
/* added by kk */
margin-top: 1px;
min-height: 300px;
min-width: 100%;
}
#kc1 img {
min-height: 300px;
min-width: 100%;
}
#kc1 > .carousel-indicators > li {
border-radius: 2px;
min-width: 2px;
background-color:#D4FF00;
border: 1px solid black;
margin-right: 1px;;
margin-left: 1px;;
}
#kc1 > .carousel-indicators > .active {
background-color:#2AFF00;
}
#kc1 .carousel-caption {
color: blue;
right: 50%;
text-align: center;
background:#fff;
left: auto;
top:12%;
bottom: initial;
transform: translateY(-50%);
transform:translateX(50%);
color:#FFF;
max-width: 1200px;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-
}
</style>
Here's a jsfiddle for clarification
The caption in a carousel is actually being controlled in the site.css file under this part:
/* Hide/rearrange for smaller screens */
#media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none
}
}