When I run this the image and carousel overflow and you have to scroll down on the page to see the bottom of image and carousel...
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src= "/assets/run3.jpg" width = "100%" alt="photo">
<div class="carousel-caption">
<h3>Sign Up Now!</h3>
<p>This is Where amazing happens</p>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
here is what happens: dropbox.com/sh/tdo3928f453123h/jTbquZNM37
You can force your slider & image width and height :
#carousel-example-generic,
#carousel-example-generic .item,
#carousel-example-generic .item img {
height: 100%;
}
#carousel-example-generic .item img {
width: 100%;
}
Bootply
Note : this won't keep proportions, but it could fit your needs.
Related
I am using bootstrap5 to make a navbar with 2 rows that is collapsible when it goes into mobile/smaller window.
Its all working but I don't think its the best way to achieve it and on top of that I have a bug when I forget to toggle it off and resize the window the menu stay.
See this GIF for what it looks like right now:
I had to create a secondary hidden menu in order to show/hide after it collapse past certain screen size, which does not look ideal.
Is there a proper way to achieve this navbar with bootstrap without having all these hacks I had to use or a proper way to achieve it?
With exception to the bug of the menu staying if u don't toggle it off it all looks the way I want it to.
I believe there is a better way to do this, but I am not experienced enough to figure it out by myself.
This is my current code:
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark container container flex-column">
<div class="container">
My LOGO HERE
<button id="navbarCollapseBtn" type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="navbarCollapse" style="visibility: hidden;">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
<form class="d-flex justify-content-between">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-secondary"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
<div class="navbar-collapse container mt-2 d-none d-md-block">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
</div>
<div class="navbar-nav">
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
</nav>
</header>
I had to further add this javascript to make it all work
$(document).ready(function()
{
$('#navbarCollapseBtn').click(function ()
{
if ($('#navbarCollapse').css('visibility') === 'hidden')
{
$('#navbarCollapse').css('visibility', 'visible', 'important');
$("#navbarCollapse").collapse("show");
}
else
{
$('#navbarCollapse').css('visibility', 'hidden', 'important');
$("#navbarCollapse").collapse("hide");
}
return false;
});
});
Here you go...
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
EDIT
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
.move-right a {
display: inline-block;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
.move-right a {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item ms-md-auto move-right">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I have two background images day.png and night.png. I want to display background image depending on the time of day.
This is the cshtml view:
<body>
<header >
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="logo">
<a class="navbar-brand" href="#Url.Action("Index", "Home")"><img
src="~/images//logo.png"></a>
</div>
<button type="button" data-toggle="collapse" data
target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
</div>
</div>
</header>
</body>
This is the CSS:
header
{
background-image: url(../images/day.jpg)
height: 120vh
background-size: cover
background-position: center
}
Would like to implement this into cshtml page:
DateTime currentTime = DateTime.Now;
if (currentTime.Hour < 5pm)
{
// use image/day.png
}
else
{
// use image/night.png
}
I have a responsive webapp which uses bootstrap. When mobile-size a hamburger menu shows in the header.
When clicked on a pc/mac/android phone it displays correctly.. But when clicked with iOS-Safari, it shows up for a quarter of a second, and hides again. I suspect this is a height or z-index issue but I'm not sure, and I have not been able to solve it.
You can try for yourself on www.gjovikhk.no.
Anyways.. here is the HTML code for the header and menu :
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 id="logo" class="logo-placeholder">
<a href='Default.aspx'>
<img runat="server" id="imgClubLogo" src="" /></a>
</div>
</div>
<div class="navbar-collapse collapse" style="z-index:9999999999">
<ul class="nav navbar-nav navbar-left menu-row" style="margin-top: 5px;">
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLoginMobile" Text="Login" href="/Login" />
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/ViewAboutUs" ID="lnkAboutUsMobile" Text="Om GHK" />
</li>
<li class="nav">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag
</li>
<li class="nav">
<i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i> Trenerforum
</li>
<li class="nav">
<div style="float: left; color: lightyellow; width: 18px; padding-top: 16px" class="glyphicon glyphicon-star-empty" runat="server" id="starPersonalMobile" clientidmode="Static" visible="False"> </div>
<div style="float: left">
<div class="dropdown" runat="server" id="ddlPersonalMobile" clientidmode="Static" visible="False" style="display: inline-block">
<a class="dropdown-toggle" id="menu3mobile" data-toggle="dropdown" style="color:darkgreen!important">
Mine lag
</a>
<ul class="nav navbar-nav dropdown-menu" role="menu" aria-labelledby="menu1">
<asp:ListView runat="server" ID="lvCoachesTeamsMobile" ItemType="Servicelayer.Team" OnItemCommand="lvTeams_OnItemCommand">
<ItemTemplate>
<li role="presentation">
<asp:LinkButton runat="server" ID="lnkNavDep" style="color:darkgreen!important" Text='<%# Item.Name %>' CommandArgument='<%# Item.Id %>' CommandName="NavigateToTeam" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
</div>
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/TeamOverview" ID="lnkTeamOverview" Text="Lag" />
</li>
<li class="nav">
<asp:LinkButton Visible="False" runat="server" href="/AdminPage" ID="lnkAdminPage" Text="Admin" />
</li>
<li class="nav" style="display: none">
<asp:LinkButton Visible="False" runat="server" href="/EventCalendar" ID="lnkTeamOverviewMobile" Text="Eventkalender" />
</li>
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLogoutMobile" Text="Logg ut" OnClick="lnkLogoutMobile_OnClick" Visible="False" />
</li>
</ul>
</div>
<div class="navbar-icon-topright">
<div style="float: right; margin-top: -8px; margin-right: 10px">
<button id="contacttrigger" type="button" class="btn btn-warning btn-circle btn-lg contact-trigger"><i class="glyphicon glyphicon-earphone"></i></button>
<%--<img id="contacttrigger" src="Content/Images/icon-contact.png">--%>
<asp:LoginView runat="server" ViewStateMode="Disabled" ID="loginView">
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/UserConfig.aspx" title="Manage your account">
<div style="float: left">
<div class="avatar-container" style="height: 30px; width: 30px; margin-top: -5px">
<img class="avatar" runat="server" id="loginAvatar" src="" style="height: 30px; width: 30px" />
</div>
</div>
<div style="float: left; padding-left: 10px; color: #333">
Hei <%: Context.User.Identity.GetUserName() %> <span class="btn btn-success btn-xs glyphicon glyphicon-user"></span>
</div>
</a></li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
Try this, with corresponding media queries and/or extra selectors to affect only responsive and/or only iPhone, as precise as you need:
.collapse.in {
overflow: hidden;
}
I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.
i.e. i want the menuitems to be full width.
<div class="col-md3 pull-left">
<div class="bs-sidebar hidden-print affix-top" id="sidemenu">
<ul class="nav bs-sidenav">
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">
<li class="">
<a href="lnk" title="">
Manage Members
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Admin/Member/addnew" title="">
Add A New Member
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
<li class="nav-header">
<a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
<ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
<li>
<a href="/Public" title="">
Home
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
<li>
<a href="/Public/Contact" title="">
Contact Us
<i class=" glyphicon glyphicon-chevron-right pull-right">
</i>
</a>
</li>
</ul>
</li>
</div>
</div>
I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.
I've hacked an example from a default bootstrap template below.
jsbin example
Default template
Default template's in mobile with vertically stacked menu
Example showing the sidemenu i want to replace the vertically stacked menu in previous image.
You need two navbars (one at the top and one at the side) and then use JQuery to move the side navbar to the top of the page.
So if you have two navbars like so:
<div class="navbar navbar-inverse navbar-fixed-top ">
<div class="container ">
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
<a class="navbar-brand " href="/ ">Application name</a>
</div>
<div id="topmenu" class="navbar-collapse collapse ">
<ul class="nav navbar-nav ">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-stacked" id="menu-bar">
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
Admin
</a>
<ul id="collapseOne" class="panel-collapse collapse">
<li>Manage Members</li>
<li>Add a new Member</li>
</ul>
</li>
<li class="panel dropdown">
<a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
Committee
</a>
<ul id="collapseTwo" class="panel-collapse collapse">
<li>Home</li>
<li>Contact Us</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
<div class="jumbotron">
<h1>Testing Responsive sidemenu</h1>
<p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<article>
<h1>Content</h1>
<p>Content here</p>
</article>
</div>
</div>
</div>
</div>
</div>
The JQuery is as follows:
var $window = $(window),
$html = $('#menu-bar');
$window.resize(function resize(){
if ($window.width() < 768) {
// When the side bar is moved to the top, this stops it being fixed in place
$("#navbar").removeClass('navbar-fixed-top');
return $html.removeClass('nav-stacked');
}
$("#navbar").addClass('navbar-fixed-top');
$html.addClass('nav-stacked');
}).trigger('resize');
And CSS:
/* CSS used here will be applied after bootstrap.css */
#media (max-width: 767px) {
.content {
padding: 15px;
margin-top: 10px;
}
}
#media (min-width: 768px) {
#menu-bar .panel {
margin-bottom: 0;
background-color: rgba(0,0,0,0);
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu-bar li a {
color: #fff;
font-size: 16px;
font-weight: bold;
}
#navbar {
float: left;
width: 200px;
height: 100%;
}
.content {
margin-left: 200px;
min-height: 100%;
margin-top: 60px;
}
.container {
margin-left: 10px;
padding-right: 150px;
}
}
.navbar-brand > h3 {
margin-top: 0;
margin-bottom: 0;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
#navbar {
margin-top: 50px
}
If you want the left hand side bar to have certain CSS, you should specify the CSS like so:
#media (min-width: 768px) {
#menu-bar {
/* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
}
}
Bootply here
I'm using custom icons but they're appearing in a circle. Is here a class I need to turn off to stop this?
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active">
<span class="foot_font">test1</span>
</a>
</li>
<li>
<a href="page40.html" id="test2" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test2</span>
</a>
</li>
<li>
<a href="page44.html" id="test3" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test3</span>
</a>
</li>
<li>
<a href="page22.html" id="test4" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test4</span>
</a>
</li>
<li>
<a href="page47.html" id="test5" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
<span class="foot_font">test5</span>
</a>
</li>
</ul>
</div>
</div>
You can override this css behavior by adding
.ui-icon
{
border-radius:0px!important;
-moz-border-radius:0px!important;
-webkit-border-radius:0px!important;
-ms-border-radius:0px!important;
-o-border-radius:0px!important;
}
To remove the circle gray background behind simply add the
ui-nodisc-icon
class to the link/button
for example, your code can be changed to
<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active ui-nodisc-icon">
<span class="foot_font">test1</span>
</a>