I can't quite figure out why the navbar is doing this, but I think it started from when I added the collapsable functionality for mobile devices to it. Now, whichever size the screen is the navbar adds on an extra 10px or so to the screen width, creating an awkward gap on the right side of the screen. I thought this could be something to do with the containers, but removing this or changing position has no effect. I also tried:
margin-right: 0px !important;
margin-left: 0px !important;
But this made no difference. The navbar currently looks like this:
<nav class="navbar navbar-inverse 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" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Me</li>
<li>C.V.</li>
<li>Personal projects</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
I really can't figure out why this is happening, so would be grateful for help, thanks :-)
It was simply because I hadn't used bootstrap containers correctly. All fixed! :-)
Related
I am trying to get my logo and hamburger menu for smaller screens to display side-by-side. On my desktop, when I make my window smaller, the hamburger menu is still to the right of the logo:
But from my phone, it appears like this:
I would like to make the logo about 10% smaller (or more) and have the hamburger menu appear on the right of it from my phone. I don't know what I'm missing here. Here's some of my code:
<nav
class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between"
>
<a href="/" class="navbar-brand text-light"
><img
src="/static/hopps-hunter_logo.png"
alt="Hopps Hunter"
class="img-responsive"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarToggler"
aria-controls="navbarToggler"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
{% if not g.user %}
<li class="nav-item">
<a
class="nav-link pr-3 text-light"
href="/user/login"
>Login</a
>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="/user/signup"
>Sign Up</a
>
</li>
I have tried various things with the bootstrap classes and styles, but can't get it to display properly on my phone.
Just add width="30" or whatever and height="auto" inside the img tag like this:
<a href="/" class="navbar-brand text-light">
<img src="/static/hopps-hunter_logo.png" alt="Hopps Hunter" class="img-responsive" width="30" height="auto" />
</a>
Automatically the hamburger menu will be on the right side responsively.
I'm building a Bootstrap based website in ASP.net. I've come across something that I'm stuck on.
An input in a navbar isn't working (on IOS only). I've narrowed it down to being how the caret is positioned outside of the input field. Please see here where a solution is given for the exact same thing but in a modal.
Any idea on how to make that solution work in a navbar? The solution for modal is to make the modal body position fixed which won't work in the full webpage.
Here is what I see:
This is my navbar:
<nav class="navbar navbar-expand-md navbar-dark position-fixed bg-dark bottomnavbar" style="z-index: 1;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<asp:Repeater ID="rpt_categories" runat="server">
<ItemTemplate>
<li class="nav-item" id="catNav_<%# Eval("id")%>">
<asp:LinkButton ID="lb_newsCat" runat="server" ToolTip='<%# Eval("category") %>' OnCommand="lb_newsCat_Command1" CommandName="naviTo" CommandArgument='<%# Eval("category") + ";" + Eval("id")%>' CssClass="nav-link" Text='<%# Eval("category") %>'></asp:LinkButton>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:TextBox ID="tb_Search" runat="server" type="search" CssClass="form-control" placeholder="Search"></asp:TextBox>
<asp:Button ID="btn_Search" runat="server" OnClick="btn_Search_Click" CssClass="btn btn-outline-success my-2 my-sm-0" Text="Submit" />
</div>
</nav>
The solution was in the source posted by #Rustyj
html, body {
-webkit-overflow-scrolling: touch !important;
overflow: auto !important;
height: 100% !important;
}
github.com/uswds/uswds/issues/277
I am attempting to build a small page with BS4 (beta2).
<nav id="TOP" class="navbar navbar-light">
<span id="banner-logo" class="navbar-brand">
<span class="fa fa-bath fa-5x"></span>
</span>
<span id="banner-heading" class="navbar-text"><h1>
Wonderful page-title
</h1>
</span>
</nav>
(There also is a fiddle here)
Somehow I am missing something in the construction of the nav: I'd like to the #banner-heading-element to be left-aligned, next to the icon. Why is that not working?
EDIT: I noticed that it works if I put the nav into a - but the BS-Examples all do not do that, so something else must be wrong...
I haven't work much with bootstrap 4 beta before but I don't believe you are doing it right, just took a quick look at the documentation here,
Navbar are formatted like:
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<span class="fa fa-bath fa-3x"></span>
Wonderful page-title
</a>
</nav>
And you can but your menu and content in a container.
<div class="container">
<div class="row">
<div class="col-md-3">
My little menu
</div>
<div class="col-md-9">
Main content area, 9 cols wide
</div>
</div>
</div>
See fiddle
EDIT
To #Mbaas's comment, if you want the icon to be the link and not the text, use li and put the anchor tags around the icon.
<nav class="navbar navbar-light bg-light">
<li class="navbar-brand">
<a href="#">
<span class="fa fa-bath fa-3x"></span>
</a>
Wonderful page-title
</li>
</nav>
You can remove the underline hover of the link by applying css like:
.navbar-brand a{
text-decoration: none;
}
To make the text large as a h1 tag you can put it in a span with a class and apply css to it like:
<span class="bold-text">
Wonderful page-title
</span>
And the css for bold-text could be something like:
.bold-text{
font-weight:bold;
font-size: 40px;
}
fiddle
So, I'm adding a popup menu off the header and it works... works quite well actually except for one small thing. For the life of me I can't get it to display the icons the way I want them!
In the first <li> I brute force the data-icon into the <li> and it shows but its not positioned to the left. In the others, I left the data-icon where I'm accustomed to leaving them (where they work correctly everywhere else) and they don't display at all.
Any suggestions?
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li data-icon="gear" data-iconpos="left">Settings</li>
<li>GPS</li>
<li>About</li>
</ul>
</div>
</div>
<!-- /header -->
JSFiddle
The data-iconpos attribute not defined for regular list items, works only when the < li> item is inside a navbar widget: http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
Please, take a look to the fiddle I made: https://jsfiddle.net/xbo8npng/1/
I have placed the icons to the left using css:
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li class="left" data-icon="gear">Settings</li>
<li class="left">GPS</li>
<li class="left">About</li>
</ul>
</div>
</div>
and the styles:
.left a{
padding-left: 2.5em !important;
padding-right: 1em !important;
}
.left a:after{
left: 2px;
right: auto;
}
I hope this helps you!
I have the following snippet. I am unable to toggle the data values in smaller resolution though the button appears on the scree. No data has been displayed when I click on toggle button.
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- 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-headerdata-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-headerdata-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About Us</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Can someone help resolving the issue?
Thanks
This was just because of improper linking of bootstrap JS.!