I' d like to move my navbar-brand, just a bit to the right. The default position overlaps, a little, with another button. How can I do it?
Here is a bit of my html code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="navbar-btn">
<span></span>
<span></span>
<span></sp<an>
</button>
<a class="navbar-brand" href="#" >Agora</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline mx-auto my-2">
<input class="form-control mr-sm-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
Do i have to use CSS?
Code is well accepted :)
i understood that you want to get the button a little bet right from his current position
you can see this example here
so you can use bootstrap positioning classes with the navbar-brand as usual like
ml-*, mr-*
Add this in you CSS file.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: right;
margin: auto;
}
You can check the running demo here. Position is center in demo, adjust the position to right or whatever you like.
Related
This is a pretty funky issue.
I'm trying to create an frameless app using electron and bootstrap 4 and wanted to style the app a bit.
After a lot of work, I came by the most odd of issues I have encountered in the entire project.
This is not an electron issue tho (hence the lack of the relevant tag).
You see, I have a header element that is 87px height (to contain the navbar and window controls like maximize and close), with a main element under it that contains the actual content of the page.
<header>
<div class="window-control bg-primary">
<button class="btn btn-primary btn-sm float-right" (click)="exitApp()"><fa-icon [icon]="faTimes"></fa-icon></button>
<button class="btn btn-primary btn-sm float-right" *ngIf="isMaximized" (click)="unmaximizeWindow()"><fa-icon [icon]="faMinusSquare" ></fa-icon></button>
<button class="btn btn-primary btn-sm float-right" *ngIf="!isMaximized" (click)="maximizeWindow()"><fa-icon [icon]="faPlusSquare" ></fa-icon></button>
<button class="btn btn-primary btn-sm float-right" (click)="minimizeWindow()"><fa-icon [icon]="faMinus"></fa-icon></button>
</div>
<nav class="navbar navbar-expand navbar-dark bg-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<span class="text-primary font-weight-bold">9</span>AnimeDl
</a>
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
</ul>
<form class="form-inline my-2 my-lg-0 mr-2">
<div class="input-group">
<input class="form-control bg-secondary border-0 text-center" aria-describedby="basic-addon1" type="search" placeholder="Search" aria-label="Search" #search (keyup)="searchChange(search.value)">
<div class="input-group-append">
<button class="btn btn-outline-primary bg-secondary text-white" type="button">
<fa-icon [icon]="faSearch"></fa-icon>
</button>
</div>
</div>
</form>
<button class="btn btn-primary" (click)="doDonate()">Donate</button>
</div>
</nav>
</header>
<app-donate-modal *ngIf="nagDonation"></app-donate-modal>
<app-waf-captcha *ngIf="_9anime.isWafActive" [siteKey]="_9anime.siteKey"></app-waf-captcha>
<main [hidden]="!isBusy" class="container-fluid bg-gray-dark">
<div class="content">
<app-loading-spinner></app-loading-spinner>
</div>
</main>
<main [hidden]="isBusy" class="container-fluid bg-gray-dark">
<router-outlet></router-outlet>
</main>
Now I added the following css to my stylesheet:
body {
overflow: hidden;
height: 100%;
}
main {
height: 100%;
padding-top: 25px;
position: absolute;
overflow-y: scroll;
}
.window-control {
height: 31px;
-webkit-app-region: drag;
-webkit-user-select: none;
button {
-webkit-app-region: none;
}
}
::-webkit-scrollbar {
width: 12px; /* for vertical scrollbars */
height: 12px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track {
background: map-get($theme-colors, "gray-dark");
}
::-webkit-scrollbar-thumb{
background: map-get($theme-colors, "primary");
}
::-webkit-resizer {
display: none;
}
This causes the "regular" scrollbar to be gone from the body and slams it into the main element
Now, here is the funky part.
When I remove the header (display: none) and scroll all the way down this is what I get:
The scrollbar reaches the bottom and says put, the cards show fully with a small padding at the bottom.
Now when I add the header back in again and scroll all the way down, this happens:
The cards don't fully show, there is no padding under it (like in the first screenshot) and the scrollbar scrolls farther than it should scroll.
My question is if anyone knows what is causing this issue and, more importantly, how to solve it.
solved it by adding an 87px thick border on the bottom of the content:
main {
border-bottom: 87px solid #ccc;
}
I don't know why, my navbar isn't centered. My buttons aren't aligned at the center and I want to change the navbar height.
How I could do that? This is the navbar:
And this is the code:
.extra-margin {
margin-bottom: 1%;
}
.extra-padding{
padding-top: 1%;
}
.extra-button{
margin-left: 5%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-dark bg-dark navbar-fixed-top extra-margin">
<ul>
<a class="btn btn-outline-primary" href="{% url 'interface:users' %}">Lista Pacientes</a>
<a class=" btn btn-outline-success" href="{% url 'interface:users' %}">Añadir Paciente</a>
<a class=" btn btn-outline-danger" href="{% url 'interface:users' %}">Eliminar Paciente</a>
</ul>
<form class="navbar-form navbar navbar-right extra-padding" action="{% url 'interface:users' %}" method="post">
{% csrf_token %}
<div class="input-group">
<input type="text" name="search_text" class="form-control" placeholder="ID del Paciente">
<div class="input-group-btn">
<button class="btn btn-outline-warning extra-button" type="submit"> Buscar Paciente
</button>
</div>
</div>
</form>
</nav>
</header>
To put the buttons inline use the following style change:
nav ul
{
margin: 0;
}
In default, the ul has some bottom margin.
https://www.bootply.com/ruS4ad9IoW
You have to change this in your CSS using the #navbar-height.
When you create the navbar have a minimum of 50px.
Now about vertical centered you can use vertical-align: middle; and change the margin to 0 in the ul element, normally ul have a margin
I'm trying to implement a right-floated search-box in my navbar, but when I resize the browser-window the search-box jumps down one row. I want it to stay to the right and not jump down one row. How can I do that? This is my navbar-code:
<nav class="navbar navbar-expand-lg navmenu justify-content-between">
<a class="navbar-brand themefont" href="/">Försvarshögskolan</a>
<div class="input-group justify-content-end">
<form name="form" class="form-inline" ng-submit="vm.anonymousSearch()" role="form">
<input type="text" class="form-control" placeholder="Svara anonymt med pin..." name="search" id="search" ng-model="vm.search.input" style="background-color: rgba(255, 255, 255, 0.2); color: lightgrey; border-color: grey;">
<span class="input-group-btn">
<button class="btn btn-outline-secondary anonymous-search" type="submit">Sök</button>
</span>
</form>
</div>
</nav>
Jumping down is caused by responsive collapsing. With class navbar-expand-lg such responsive collapsing happens when your resized browser-window is less than 992px in width (because of the -lg suffix). Change mentioned class to navbar-expand so that your search-box stay always to the right:
<nav class="navbar navbar-expand navmenu justify-content-between">
I am developing a site, where I have Login div as part of header in Desktop view. Where as the same div has to be appear in Mobile menu along with existing menu items as shown below:
So, how to implement this as part of mobile menu item (Without using 2 Divs for hide/show) using Bootstrap?
You could use the navbar class for your header. And then bootstrap will automatically behave that way. Otherwise you should use the media query.
Or you could use the visible-xs, visible-sm, etc. bootstrap classes (with mulitple div's), to handle what is viewed on which device.
first of all this is no javascript / jquery question.
What you wannt to do is explained here
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
bootstrap itself does the job just read that doc
I Think You Have Too Use .col-md class from bootstrap.
Give Class OF menu div as col-md-4 and in login and content div has col-md-8.
For Example,
<div class="row">
<div class="menu col-md-4"></div>
<div class="login col-md-8"></div>
</div>
Just Like This...
If You Are Don't familiar with Bootstrap. Then First Read Out The Documentation That Will Suggested By Burak Topal . So You are understand that what this class will actually do.
Might This Will Helpful.
I found the solution for this without using media queries. We need to place both top and left navbars inside ".navbar-collapse" class.
I have used a custom class "navbar-fixed-left" to make the left navbar.
.navbar-fixed-left {
margin-top: 47px;
left: 0px;
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
<nav class="navbar navbar-inverse">
<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="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="User Name">
<input type="text" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
<div class="navbar-inverse navbar-fixed-left">
<ul class="nav navbar-nav">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<h3>Content goes here...</h3>
</div>
Here is an image of my problem.
See how the hamburger/menu icon is pushed down to the next line? I want the text to go to the next line instead, keeping the menu button and header text next to eachother. The title text and menu are floated left and right respectively.
This doesn't seem to be a clear problem (since I'm trying to do the opposite), and I can't think how the white space property could be used in this case.
The only thing that works is setting a max width on the title, but that messes up the layout at some screen sizes.
I have no custom css on these elements, just what comes with Bootstrap 3
Markup (basically lifted straight from the new Bootstrap 3 docs):
<div class="navbar navbar-default">
<div class = "navbar-header">
<a class = "navbar-brand" href="<%= request.protocol + request.host_with_port%>/weather"> Weather </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 navbar-ex1-collapse">
<form id="search" class="navbar-form navbar-right form-inline" method="get" action="/weather">
<div class="form-group">
<input type="text" placeholder="Search for your city or zip" class="form-control" id = "searchbox" name="search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"/></button>
</form>
</div>
`
Stephen,
Two changes are required to get your desired result.
First, set .navbar-brand padding right to 70px or what you needed.
.navbar-brand {
padding-right:70px;
}
And second, make .navbar-toggle position:absolute, right:0;
.navbar-toggle {
position:absolute;
right:0;
top:0;
}
And you are done! :).
Here is demo: http://jsfiddle.net/sARaY/