I changed my navbar to full width navbar and after that my input div and ul with icons changed width. Can't fix that tried a lot of but i don't know what is solution for that problem. I am using a container to center that content in navbar maybe tha's the reason.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<nav class="navbar-nav navbar-expand-sm fixed-top">
<div class="container">
<a class="navbar-brand"><img src="path1610.png"></a>
<div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Let's rock!">
<div class="input-group-append">
<button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarHidden">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-user fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<span class="fas fa-bell fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-fire fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-cog fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-comments fa-2x">
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Just changed the outer nav class from navbar-nav to navbar and changed container to container-fluid for full width.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm fixed-top">
<div class="container-fluid">
<a class="navbar-brand"><img src="path1610.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
</button>
<div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Let's rock!">
<div class="input-group-append">
<button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse" id="navbarHidden">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-user fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<span class="fas fa-bell fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-fire fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-cog fa-2x"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fas fa-comments fa-2x">
</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
Related
My navbar currently has no background, but in the smartphone version it looks a bit odd, so I would like to know if it's possible to only put a white background on the small screen. Thank you!
here's the code:
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
home
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</li>
<li class="nav-item mr-4">
chi sono?
</li>
<li class="nav-item mr-1">
contattami
</li>
</ul>
</div>
</nav>
Using media queries to fix it.
#media (max-width: 575.98px) {
// some style include here
.navbar.navbar-expand-md.navbar-light{background:#111;}
.navbar.navbar-expand-md.navbar-light .navbar-toggler{background:#fff;}
}
#media (max-width: 575.98px) {
// some style include here
.navbar.navbar-expand-md.navbar-light{background:#111;}
.navbar.navbar-expand-md.navbar-light .navbar-toggler{background:#fff;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
home
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</li>
<li class="nav-item mr-4">
chi sono?
</li>
<li class="nav-item mr-1">
contattami
</li>
</ul>
</div>
</nav>
Use a #media (<specified width>) {...} to do this. I have it set for a slightly bigger screen in this example. You can read more about media queries here: https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints
#media (max-width: 992px) {
.navbar-nav {
background: red;
}
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light fixed-top mt-4">
<a class="navbar-brand ml-4" href="index.html">
<img src="img/logo.png" width=100% alt="" loading="lazy">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-4">
home
</li>
<li class="nav-item mr-4">
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
progetti
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="graphicdesign.html">01. Graphic Design</a>
<a class="dropdown-item" href="videografica.html">02. Videografica</a>
</div>
</div>
</li>
<li class="nav-item mr-4">
chi sono?
</li>
<li class="nav-item mr-1">
contattami
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
I wanted to combine my CSS and Bootstrap with MVC but I cannot style my links properly. As far as I know I need to use #Html.ActionLink to redirect my webpage. Is there a way to style it?
Everything works while using pure CSS:
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">LIBRARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
This is my MVC:
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/Index">
#Html.ActionLink("Library", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
I have also tested this on MVC but still does not style:
#Html.ActionLink("Library", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
My index.cshtml file looks like this:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<h2>Index</h2>
My controller looks like this:
public class MyTemplateController : Controller
{
// GET: MyTemplate
public ActionResult Index()
{
return View("Index");
}
public ActionResult About()
{
return View("About");
}
public ActionResult Contact()
{
return View("Contact");
}
}
}
HTML file:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<title>#ViewBag.title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css">
<link rel="stylesheet" type="text/css" href="Content/style.css">
<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>
#RenderSection("head", false)
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #333;text-align: center;">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Books
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">New books</a>
<a class="dropdown-item" href="#">Recommended books</a>
<a class="dropdown-item" href="#">Available books</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Genres</a>
<a class="dropdown-item" href="#">Formats</a>
</div>
</li>
<li class="nav-item">
#Html.ActionLink("About", "About", "MyTemplate")
<a class="nav-link" href="/About">About</a>
</li>
<li class="nav-item">
#Html.ActionLink("Contact", "Contact", "MyTemplate")
<a class="nav-link" href="/Contact">Contact</a>
</li>
</ul>
</div>
#Html.ActionLink("Index", "Index", "MyTemplate")
#Html.ActionLink("Index", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/Index">
#Html.ActionLink("Index", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<form class="form-inline d-none d-lg-block justify-content-center md-form form-sm mt-0" style="padding: 5px">
<i class="fas fa-search" aria-hidden="true"></i>
<input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
aria-label="Search">
</form>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up <i class="fa fa-user-plus" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In <i class="fa fa-user" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
<main>
#RenderBody()
</main>
<footer>
<div class="row text-center">
<div class="col-md-4 col-sm-12 social">
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fas fa-envelope-square"></i>
<i class="fab fa-facebook-square"></i>
</div>
<div class="d-none d-md-inline col-md-4">
<p class="me"></p>
</div>
<div class="d-none d-md-inline col-md-4">
<p class="me">Rafal Pawlowski ©2020</p>
</div>
</div>
</footer>
</body>
</html>
Unfortunately styling does not apply. I know I could do #style and style it this way but I wanted all style to be applied in style.css not hardcoding it in each class because it will look bad in my code. Please help
If you want this HTML:
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">LIBRARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
Then your MVC should look like this:
<div class="mx-auto order-0">
#Html.ActionLink("Library", "Index", "MyTemplate", null, new { #class = "mx-auto order-0" })
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
You are warapping your Html.ActionLink (which renders as an anchor tag) in another a tag. And you cannot have a link inside a link.
Alternativly, you could do this also (notice the href of the a tag is the Razor Url helper):
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#Url.Action("Index", "MyTemplate")">LIBRARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
I like the look of the nav pills on larger screens, but once the collapse button shows I want that menu to be stackable and look like the image attached instead of the pills. Do I need custom css to make this happen?
<div id="menu" class="navbar navbar-expand-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".main-nav-collapse" aria-controls="main-nav-collapse" aria-expanded="true" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse main-nav-collapse">
<nav class="nav nav-pills mr-auto">
<a class="nav-link" href="/"><i class="fa fa-home"></i></a>
</nav>
</div>
</div>
Want this on smaller screens
Want these pills on larger screens but not smaller
I accomplished this with the below code.
<nav class="nav nav-pills mr-auto flex-column d-md-flex flex-md-row">
You can switch those classes d-none and d-flex here.
Why d-flex here instead of d-block because .nav class are made using flexbox so flex is more comfortable than block.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- TILL 1200PX (XL) -->
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex d-xl-none">
<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>
<!-- AFTER 1200PX (XL) -->
<ul class="nav d-none d-xl-flex">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
This navigation bar uses Bootstrap 4. For medium screens (768px to 991px), I would like the search bar and button to be moved to the second line, as it is on large screens and above. Currently, on medium screens the search bar squishes up next to the other navigation links:
How it looks on large/extra large screens:
Updated code per first answer suggestion:
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-navbar">
<div class="container">
<a class="navbar-brand" href="/" style="align-children: middle">
<span class="" aria-hidden="true"></span>
Example
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="site-nav">
<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="/agencies/">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/meetings/">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agenda/">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/documents/">Documents</a>
</li>
</ul>
<form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
<div class="btn-group">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
<button type="submit" class="btn search-button">Search</button>
</div>
</form>
</div>
</div>
</nav>
You can use the responsive flexbox direction utils. For example, flex-column flex-xl-row on the navbar-collapse.
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/" style="align-children: middle">
<span class="" aria-hidden="true"></span>
Example
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto align-items-start align-items-xl-center flex-column flex-xl-row" id="site-nav">
<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="/agencies/">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/meetings/">Meetings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/agenda/">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/documents/">Documents</a>
</li>
</ul>
<form class="form-inline ml-2" role="search" action="/search/" method="post">
<div class="form-group">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
</div>
<button type="submit" class="btn search-button">Search</button>
</form>
</div>
</div>
</nav>
https://www.codeply.com/go/ZEyl77GzA8
Note: You're using navbar-expand-md so the Navbar will collapse into the toggler on sm. If you want to instead show the stacked menu/form on md you should reduce the navbar expand to sm.
Also see: Bootstrap 4 navbar with 2 rows
Put the contents of the search form in a btn-group, which should keep them together:
<form class="form-inline mt-3 mb-3" role="search" action="/search/" method="post">
<div class="btn-group" role="group" aria-label="Basic example">
<input type="text" name="request" class="form-control" placeholder="Search Documents">
<button type="submit" class="btn search-button">Search</button>
</div>
</form>
I have a question if and how the following is achievable through CSS:
View 1 (large screens):
View 2 (medium-sized screens):
Secondary question: How to center the navigation elements as soon as they are placed in a the second line?
View 3 (mobile):
My problem is, that the right part of the navigation (govel, bookmark, ..., login) should be in the same line as the logo, if there is not enough space (medium-sized screens, View 2). But if mobile navigation gets activated (View 3), I want to be the "Suche", "Kataloge", "Kategorien"... links first.
Also it would be nice if the navigation elements can be centered in (View 2).
The whole thing is build with Bootstrap 3.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
nav#header img.favicon-logo {
padding-top: 5px;
height: 46px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" id="header">
<div class="container-fluid">
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="https://www.lotsearch.de/images/favicons/favicon_144x144.png" class="favicon-logo">
</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<div class="navbar-collapse collapse" id="main-menu" aria-expanded="false" style="height: 1px;">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i>
Suche <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen)</li>
<li><i class="fa fa-archive fa-fw"></i> Suche (Archiv)</li>
</ul>
</li>
<li>
<a href="/auction-catalogs">
<i class="fa fa-book fa-fw"></i>
Kataloge </a>
</li>
<li>
<i class="fa fa-list-alt fa-fw"></i> Kategorien
</li>
<li>
<i class="fa fa-bell fa-fw"></i> Suchaufträge
</li>
<li>
<i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen
</li>
<li>
<i class="fa fa-newspaper-o fa-fw"></i> Blog
</li>
<li>
<i class="fa fa-star fa-fw"></i> Top-Seiten
</li>
<li>
<i class="fa fa-pencil-square-o fa-fw"></i> Registrieren
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/bids/management/bidlist" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-gavel fa-fw"></i> Gebote (Bietliste)
</div>
</a>
</li>
<li>
<a href="/favorites" title="Merkzettel">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-bookmark fa-fw"></i> Merkzettel
</div>
</a>
</li>
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-langauge">
<li><span class="flag-icon flag-icon-gb"></span> GB </li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user fa-fw"></i> Login <span class="caret"></span>
<ul class="dropdown-menu dropdown-lr animated fadeIn" role="menu">
<li>
<div class="col-lg-12">
<h4>Login</h4>
<form method="post" name="loginform" action="/user/login" id="loginform">
<div class="form-group "><label>Email</label><input name="identity" type="text" tabindex="1" class="form-control" value=""></div>
<div class="form-group ">
<label for="credential">Passwort</label> <span class="pull-right">Passwort vergessen?</span>
<input type="password" name="credential" tabindex="2" class="form-control" value="">
</div>
<div class="form-group "><button type="submit" name="submit" class="form-control btn-orange btn btn-default" tabindex="3" value=""><span class="fa fa-sign-in"></span> Einloggen</button></div>
</form>
<div class="text-center pt-5px">
<p class="pb-5px">- ODER -</p>
<a class="btn btn-default" href="/user/registration/select-product">
<i class="fa fa-pencil-square-o"></i> Registrierung </a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>