I have been trying to create a bootstrap footer using the class navbar-fixed-bottom, however I do not want this to be a fixed element and I want to have to scroll to it.
This is my existing code
Any help?
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left"><strong>Click08.co.uk</strong> is a <strong>Web Daddy</strong> project.</p>
<a class="navbar-btn btn btn-success pull-right" href="../Home.php">Return To Home</a>
</div>
</div>
Related
Hello im trying to put my content area to the right of my vertical nav bar using bootstrap 4. in my current code the content area is under the menu. any suggestions on how to fix it so its next to the menu on the right side.
Thank you
<div class="container-fluid">
<div class="col-3">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style>
<ul class="navbar.flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">Index</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="col-9">
<p>Main Content area</p>
</div>
</div>
Copy the col-9 div and place it after the col-3 div ends. Add d-flex flex-row classes with container-fluid class.
When at the top of the page, I want to list the phone number and email above the navbar. However, when you start to scroll down, I want the phone number and email to go away and just show the navbar. I have tried using fixed-top, however, it always hides the phone/email.
How can I achieve this across all device sizes?
I'm using Bootstrap 4.
<body class="d-flex flex-column h-100">
<header>
<div class="container">
<div class="float-right mt-1">
<i class="fas fa-envelope"></i><span class="ml-1 text-dark d-none d-sm-inline">info#example.com</span>
<i class="fas fa-phone-alt"></i><span class="ml-1 d-none d-sm-inline">+1 (555) 555-5555</span>
</div>
<br>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
<a class="navbar-brand" href="#">Example</a>
</nav>
</div>
</header>
You should be able to add the .sticky-top class to just the nav element and when you scroll past it on the page it should be the only item at the top.
<nav class="sticky-top navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
<a class="navbar-brand" href="#">Example</a>
</nav>
I am in trouble in my project for using bootstrap nav.
After nav is jumbotron div, but there is a bland gap between nav and jumbotron.
I have trid define nav:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
"navbar-fixed-top" can delete bland gap, but nav has hidden part of jumbotron. So the content of jumbotron is not in the middle of container.
Here is my code:
<style>
.navbar .nav li.active a:hover{color:#51c3e1}
</style>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid" style="height:70px">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="pic/logo.png" style="width:130px;height:40px;top:1px"></a>
</div>
<div></div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 style="white">Hello!</h1>
<p style="white">I love this world!!</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more ยป</a></p>
</div>
</div>
It seems nothing wrong, who can help me?
I have found the solution:
.navbar { margin-bottom:0px}
I am trying to build a nav-bar that would appear on the left-hand side while the rest of the content would be on the right-hand side. The problem is the nav-bar buttons group is not in the same section with the navbar-header. I want the nav-bar buttons to align together vertically with the navbar-header on the left-hand side, but right now they just overlap each other. Not only that, it looks like the buttons group is sitting/overlapping between the navbar-header and the rest of the HTML content.
Much appreciate all the help that can point me to fix this! Thank you!
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-lg-2">
<nav class="navbar navbar-default navbar-fixed-side">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="./">Lessons</a>
</div>
<div class="btn-group-vertical navbar-btn">
<div class="btn-group navbar-btn">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Lesson #1<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Lecture</li>
<li>Quiz</li>
<li>Exam</li>
</ul>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Lesson #2<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Lecture</li>
<li>Quiz</li>
<li>Exam</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="col-sm-9 col-lg-10">
<div id="lesson">
<h2>Choose a lesson on the left panel to start your study module.</h2>
</div>
</div>
</div>
</div>
First off, You seem to be missing a outline CSS.
I assume the code is also incomplete, as I do not see at the very least a "body" tag. Note, if you do have a outline CSS, and you didn't include it, that may also be your issue.
Towards alignment, you can use "margin(-*):[distance][unit];", or "align="[Center, right, justified, etc]"
I am using BootStrap. I have a navbar at the bottom of my page with a phone number. I want that phonenumber to be hidden upon collapse and then show a phone icon instead. Currently I can't get the phone icon to be hidden before collapse. Here is my code:
<div class = "navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner">
<div class ="container">
<div>
<img src="logo.png" alt="#" href="#">
</div>
<div class = "collapse.in navbar-collapse navbar-right" id="bund-navbar-collapse-semi">
<a class = "navbar-btn btn-success btn-xl btn pull-right">
<span class="glyphicon glyphicon-earphone" ></span>
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bund-navbar-collapse-fuld" >
<a class = "navbar-btn btn-success btn-xl btn pull-right">
<span class="glyphicon glyphicon-earphone "></span> +45 30 30 30 30
</a>
</div>
</div>
</div>
</div>
make use of the responsive-utilitie classes from Bootstrap.
add the classes
hidden-sm
hidden-md
hidden-lg
to the button with just the phone icon, see the fiddle. Never mind that the icon isn't showing properly. I would use bootply but its down for maintenance.