So basically, I took my friends website template which works on mobile and changed things and now use the template. Although, I am unable to open the mobile menu bar.
Here is the following code for the navbar
<div class="contact-bar">
<div class="container">
<div class="row">
<div class="col-sm-8 align-left">
<head>
<link rel="icon" type="image/ico" href="favicon.ico"></head>
<ul>
<li><i class="fa fa-phone" style="vertical-align: middle; font-size: 19px;"></i> (416) 824-5864</li>
<li><i class="fa fa-envelope"></i> topspintennisstringing#gmail.com</li>
</ul>
</div>
<div class="col-sm-4 align-right">
<ul>
<li><i class="fa fa-instagram" style="color: #000000;"></i></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" 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 class="brand">
<img src="assets/img/logofinal.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li><!--
<li>Conditions</li>
<li>Contact</li>-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
I don't know what the problem can be because I directly copied the code although it does not work. Also, when I uploaded his website, it also did not work. There is also no bootstrap version in the bootstrap.min.css file. I also use xampp to host the site while developing.
Thank you for reading this post!
Related
When I press the menu item on the top right side of my webpage it doesn't collapse. I have checked my code and it seems to be okay.
The website with the problem is: www.kemnet.be
I have tried putting everything in the block and made minor changes to my jquery and CSS.
I have this from a theme and added the original code to my site for testing but the dropdown still doesn't show.
<header class="navbar navbar-inverse navbar-fixed-top opaqued" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="bounce-in no-display animated bounceIn appear" href="index.html"></a> <img src="images\white.png">
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Praktisch </li>
<li>Onze Visie</li>
<li>Ons Team</li>
<li>Ons Aanbod </li>
<li>Nieuws</li>
<li>Contact</li>
<li><a class="border" href="https://www.mtc-it4.be/patient/index.html#/appointments/day/bjNkcWkyQmFRMkpDVTRFNndleFgzSlRvdC9TSU1YOXdJWklnQ2ZtMDhjcEJCYWl6RlREMWxyOGlZY2FSUk10WQ==" target="_blank">Maak een afspraak</a></li>
</ul>
</div>
</div>
</header>
I don't receive any error messages tho.
I just replaced <i class="fa fa-bars"></i> with classic way.
<header class="navbar navbar-inverse navbar-fixed-top opaqued" role="banner">
<div class="container">
<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>
<a class="bounce-in no-display animated bounceIn appear" href="index.html"></a> <img src="images\white.png">
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Praktisch </li>
<li>Onze Visie</li>
<li>Ons Team</li>
<li>Ons Aanbod </li>
<li>Nieuws</li>
<li>Contact</li>
<li><a class="border" href="https://www.mtc-it4.be/patient/index.html#/appointments/day/bjNkcWkyQmFRMkpDVTRFNndleFgzSlRvdC9TSU1YOXdJWklnQ2ZtMDhjcEJCYWl6RlREMWxyOGlZY2FSUk10WQ==" target="_blank">Maak een afspraak</a></li>
</ul>
</div>
</div>
</header>
https://jsfiddle.net/v61aeg5r/1/
I try to align my navbar placed at the top of my webpage, but somehow one of items appears straight down "Kontakt".
I would like all items i have to be in same line. Second issue is i cannot make my logo when click on it redirect to my page at the top again.
Code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/ico2.png" class="img-responsive" alt="logo">
</div>
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<div class="col-md-8 col-xs-12 nav-wrap">
<ul class="nav navbar-nav">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
<!-- <div class="social-media hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li>
<i class="fa fa-facebook"></i>
</li>
</ul>
</div> -->
</div>
</div>
</nav>
You don't need the wrapping div#bs-example-navbar-collapse-1s for a navbar to work.
And wrap a link tag around the image to redirect it to your homepage.
Update:
Issue 1) There are limitations to how many items Bootstrap can show in a navigation bar. Please check the docs and read the limitations.
Issue 2) I have fixed the code. Please ensure that jQuery and bootstrap JS files are loaded.
Issue 3) I cannot recreate the issue. It seems related to the logo size. Can you post a jsFiddle?
Updated Here is the fixed code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="//www.your-any-webste.com/"><img src="img/ico2.png" class="img-responsive" alt="logo"></a>
</div>
<ul class="nav navbar-nav collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
<li><i class="fa fa-windows"></i> Witamy</li>
<li><i class="fa fa-dropbox"></i> Usługi</li>
<li><i class="fa fa-user"></i> Realizacje</li>
<li><i class="fa fa-user"></i> Etapy </li>
<li><i class="fa fa-stack-exchange"></i> O nas</li>
<li><i class="fa fa-whatsapp"></i> Kontakt</li>
</ul>
</div>
</nav>
I found a code from
http://usebootstrap.com/theme/facebook
But in this code, I want to make 'Home icon' never be collapsed at any browser size.
CODE:
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
b
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
###▽▽▽ I want this icon remain on the navbar, not in collapsed dropdown menu
<i class="glyphicon glyphicon-home"></i>
###△△△ I want this icon remain on the navbar, not in collapsed dropdown menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
</div>
Bootply: https://www.bootply.com/lEfd188zDg
I tried to move <i class="glyphicon glyphicon-home"></i> to after b, but it looks very ugly.
I want that 'Home icon' is still seen in smaller browser size, being looks nicely not ugly. How can i modify well?
EDIT
Pic:
This simplified code is a little different from above code that i posted firstly.
Simplified code:
<div class="wrapper">
<div class="box">
<div class="row row-offcanvas row-offcanvas-left">
<div class="column col-sm-12 col-xs-12" id="main">
<!-- top nav -->
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>
</div>
</div>
</div>
</div>
original result is like:
and in narrow browser,
But purpose result is like:
Would give me the way how to make this?
I just updated your HTML code and added CSS. Just replace it with yours. Please Only tap nav.
<style>
.heading-icons li{
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
}
</style>
<div class="navbar navbar-blue navbar-static-top">
<div class="col-xs-6 col-sm-6">
<ul class="list-inline heading-icons">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
</div>
<div class="navbar-header col-xs-6 col-sm-6">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="glyphicon glyphicon-user"></i></a>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>
So today I have been learning how to use Bootstrap(I'm very new) and I have come across a bit of a problem. This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
</body>
</html>
and basically everything is fine however, if you view my code as .html or whatever in a browser, you will see that under the navigation menu at the top which is black, there is the jumbotron which is fine however, the background of it is black which I don't want, I want it to be white like the rest of the page. I'm so new to this so I can't even manage to figure out how to do this so any help would be highley appreciated. Sorry, I've tried to be as specific as I can but I really am new to this and I'm hoping someone can help me.
TH.
Get
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
outside of
nav tags
You do not have to make any changes in CSS
You can use css for the navbar color but still I am confused what actually you want:
.navbar-inverse .navbar-toggle {
background-color: #efefef;
}
.navbar-inverse .navbar-toggle:hover {
background-color: #efefef;
}
JSfiddle for the same
Put the container div outside the nav.
Here:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
</body>
</html>
Hope i understood you right. If you DONT want to change any html markup you just need to change the color by adding a custom css class to the desired elements and override what boostrap does:
<nav class="navbar navbar-inverse myJumbotronColor">
<div class="container-fluid myNavBarColor">
<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="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome!</h1>
<p>Random text here that doesn't matter</p>
<a class="btn btn-default">Watch now!</a>
<a class="btn btn-info">Tweet it</a>
</div>
</div>
</nav>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site created: 30/05/16</p>
Subscribe on YouTube
</div>
</div>
And the custom css:
.myNavBarColor {
background-color: rgb(34, 34, 34);
border-color: rgb(8, 8, 8);
}
.myJumbotronColor {
background-color: #fff;
border: none;
}
https://jsfiddle.net/6gnp4doL/
Please note that you have a markup error in your html:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<!-- these two tag should not be here
</ul>
</li> -->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login
</li>
</ul>
</div>
You can seek which element has the actual background.
Than go to your CSS file ( assuming you made one ) and set the background color to white.
Let's assume the nav-bar header class has the background color to it
Add this to your CSS file
.nav-bar
{
background-color: white !imporant;
}
The !important is to override any other style sheet lines written to adjust the property on the element.
im using the latest version of bootstrap and when i resize the screen browser the navbar, when dropped down with the small toggle button overlaps the text on the page instead of pushing page content down. I have researched the problem several times. I tried putting padding-bottom on the navbar and padding-top on the body. I have tried numerous other things suggested but nothing is working. Appreciate any help.
This is the html code:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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 class="navbar-brand navbar-brand-left" href="#"><img src="somepicture"></div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered"">
<ul class="nav navbar-nav">
<li>Home</li>
<li>What's On</li>
<li>About Us</li>
<li>Parties</li>
<li>Gallery</li>
<li>Menu</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Share<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Facebook</li>
<li>Twitter</li>
</ul>
<li>Contact Us</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
the css i have used was to only apply color/font/font size etc, nothing that would have contributed to this problem. Its a basic and simple brochure website and im sure the problem is probably right in front of my eyes but im not experienced enough to notice as im only learning, but still would appreciate anyone that could help.
The navbar works perfectly fine and the way its supposed to in a normal size desktop but the problem is only when i resize the browser to a mobile phone size.
This is a url of an image of the problem to make it easier to understand:
http://s1368.photobucket.com/user/oliviah452/media/Screenshot2_zpsc9ffafb1.png.html
Cleaned up your code a bit in the process, but if you set your navbar to be navbar-static-top rather than navbar-fixed-top, your content will get pushed down when the collapsed menu is expanded.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<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 class="navbar-brand navbar-brand-left" href="#">
<a href="index.html">
<img src="somepicture"></img>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>What's On
</li>
<li>About Us
</li>
<li>Parties
</li>
<li>Gallery
</li>
<li>Menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Share<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Facebook
</li>
<li>Twitter
</li>
</ul>
<li>Contact Us
</li>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test
<br />Test