input[type="text"] {
position: relative;
top: 0;
left: 0;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
input[type="text"]:focus {
padding: 1px 1px 1px 2px;
}
.searchInput {
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Between 992px and 1180px of the screen size. The logo and the links called principal are affected by the transition when I click on the input.
This should not happen, I don't know where is the problem, maybe the problem is on the line transition: all? I'm not sure because I don't work much with css.
Why is it happening, and how can I solve it?
It happens because you're targeting the padding of the input and not the actual placeholder, which from what I understand is what you actually want to animate.
So - you'd plug in the ::-webkit-input-placeholder pseudo selector, and apply the transition effect to that.
That would look something like this:
.navbar {width: 100%; height: 100%;}
input[type="text"] {
position: relative; top: 0; left: 0;
}
/*Hit the placeholder of input. not actual input. */
input[type="text"]::-webkit-input-placeholder {
padding-left: 6px;
-webkit-transition: all .7s;
-moz-transition: all .7s;
transition: all .7s;
}
/* set padding down since you can't do negative padding */
input[type="text"]:focus::-webkit-input-placeholder {
padding-left: 0;
}
.searchInput{
background-color: transparent;
border-bottom: 1px solid;
border-bottom-color: #808080;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="MeuCss/cssSearchBar.css">
<title>Hello, world!</title>
</head>
<body>
<!----------------------------- nav bar ------------------------------>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="?p=#"><img src="https://png.pngtree.com/element_pic/17/01/01/93b5a86a0836ef7f1a078d48ab3bc32f.jpg" alt="BizarroNEWS" width="50%"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav mr-auto mt-2 mt-lg-0 ml-3 textoNavbar dropMenuHoverColor">
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="?p=#">pincipal</a>
</li>
</ul>
<div class="col-sm-12 col-md-12 col-lg-3 my-1">
<form action="?p=pesquisa" method="post" value="" enctype="multipart/form-data">
<div class="input-group">
<input class="form-control searchInput" id="cxnome" name="cxnome" type="text" placeholder="Pesquisar" aria-label="Search" required="required">
<button type="submit" name="pesquisar" class="input-group-append button">
<img src="img/searchIcon.png">
</button>
</div>
</form>
</div>
</div>
</nav>
<!----------------------------- end nav bar ------------------------------>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Related
I already have a side menù, I want him to change into a hamburger menù whenever the website is open by a mobile device. I also use bootstrap libraries, I dunno if it can help, it would be better using them. Here's an example of what I have:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
div {
border: solid black 1px;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
width: 100%;
}
.menu {
text-align: center;
}
button {
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
<div class="menu">
<button>Content 1</button><br>
<button>Content 2</button><br>
<button>Content 3</button><br>
<button>Content 4</button><br>
<button>Content 5</button><br>
<button>Content 6</button><br>
<button>Content 7</button><br>
<button>Content 8</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
Since you're using Bootstrap, it's easier to do it with Bootstrap like this:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="yourlogo.com" class="d-inline-block align-top" width="32" height="32" alt="Your logo" />web.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar-content" aria-controls="navigation-bar-content" aria-expanded="false" aria-label="Expand navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation-bar-content">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link disabled" href="#">Products</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Submit</button>
</form>
</div>
</nav>
When used on a phone, the navigation menu folds into a hamburger. You can verify this, for example, using the developer tools (CTRL + SHIFT + I in Chrome).
Of course, you need to have some sort of search function for that search field or it won't work for you. You can also add a dropdown there, but you must also have JavaScript linked.
#header-img{
background-image: url("https://helpx.adobe.com/ca/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg");
height: 400px;
background-size: contain;
background-repeat: no-repeat;
background-attachment: fixed;
display: block;
}
The problem occurs when i add background-attachment fixed in css. The image not only goes behind the navbar but when i use margin-top it eats up the image from the top, When I change the browser width to check for responsiveness the image goes up and keeps disappearing from the top;
https://jsfiddle.net/j2z9eoy8/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="header-img">
</div>
</header>
<div class="container-fluid">
hi
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Remove background-attachment:fixed;
and change background-size to cover
Height of container can be set with height: calc(100vh - XXXX);
Where XXXX is the height of nav.
Im having problems to float elements to the right inside bootstrap navbar, I need to apply float:right to Option 1 and Option 2 elements, and center Search Input, I tried !important rule but still doesnt work, and when the content is collapsed and you click navbar toggler button it moves some px from the left.
Edit: I also need to display navbar when is collapsed in this order: Brand - Search Input - Toggler button. And the content of toggler button under Search Input.
Here is the relevant code:
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchForm{
margin: auto;
}
#test{
text-align: center;
border: 5px solid black;
float: right;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<section class="row" id="mainNav">
<nav class="navbar navbar-expand-xs rounded">
<a class="navbar-brand" href="#">Brand</a>
<form class="form-inline" id="searchForm" role="search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div id="test">
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
</div>
</nav>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
just add <div class="col-md-12"></div> below to section it'll be works
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchForm{
margin: auto;
}
#test{
text-align: center;
border: 5px solid black;
float: right;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<section class="row" id="mainNav">
<div class="col-md-12">
<nav class="navbar rounded">
<a class="navbar-brand" href="#">Brand</a>
<form class="form-inline" id="searchForm" role="search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div id="test">
<div class="collapse navbar-collapse" id="navToggler">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
</div>
</nav>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>
If you want a mega-menu in Bootstrap 4 (like eg. yamm for Boostrap 3), I had success with using flexbox:
<!-- adapted from bs-repo basic navbar example code -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com"
id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown link</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<ul class="d-md-inline-flex flex-md-row">
<li class="dropdown-item">
<ul class="d-md-inline-flex flex-md-column">
<li class="dropdown-item">Action</li>
<li class="dropdown-item">Another action</li>
<li class="dropdown-item">Something else here</li>
</ul>
</li>
<li class="dropdown-item">
...
</li>
<li class="dropdown-item">
...
</li>
</ul>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
Use the Bootstrap 4 integrated Flex-System. I cleaned the code a bit and added the magic ml-auto (margin-left:auto).
Give it a try.
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchForm{
margin: auto;
}
<html>
<head>
<title></title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg rounded" id="mainNav">
<a class="navbar-brand" href="#">Brand</a>
<form class="form-inline" id="searchForm" name="searchForm" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search" type="text">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<button aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navToggler" data-toggle="collapse" type="button"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse ml-auto" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Option 2</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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>
</body>
</html>
I do not get to align the brand logo and the text and image icons to the navigation bar to use bootstrap enviroiment.
The problem is the logo is outside botton of the navigation bar and the icon not align with the text.
Please could you help me?
Te code is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Testing</title>
<!-- INCLUDES -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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://www.google.es"><img src="assets/images/brandlogo.png"/></a></div>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active marges-opciones-right" ><i class="material-icons" style="font-size: 40px">work</i> Page1<span class="sr-only">(current)</span></li>
<li class="text-options marges-opciones-right"><i class="material-icons" style="font-size: 40px">collections</i> Page2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown marges-opciones-left"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><i class="material-icons" style="font-size: 40px" >face</i><span class="username"> Username </span><i class="material-icons" style="font-size: 40px" >list</i></a>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon"></span><i class="material-icons">settings</i> preferències</li>
<li><span class="glyphicon"></span><i class="material-icons">lock</i> canviar password</li>
<li class="divider"></li>
<li><i class="material-icons" style="font-size:18px">power_settings_new</i> log out</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The css is default of bootstrap.
Simply add these properties to align them in the same line:
.navbar-default .navbar-nav>li>a {
display: flex;
align-items: center;
justify-content: center;
}
Hope this helps,
Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?
Here is my CSS and Html as well,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
and css:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}
The map is not an image, it will not downsize while you downsize your browser