My menu does not open on click and cant understand why. Checked alot of posts in stackoverflow and around the web, but still cant figure it out. The question might be pathetic, but i am still newbie in bootstrap.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div class="navbar navbar-default navbar-fixed-top text-uppercase">
<div class="container">
<div class="navbar-header">
My Blog
<button type="button" class="navbar-toggle" data-toggle="collapse" data-targert=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
Register
</li>
<li>
Login
</li>
</ul>
</div>
</div>
</div>
</header>
<footer></footer>
Will appreciate any advice! Thank you!
You made a typo: it should be "data-target", not "data-targert" :)
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
After this change, it worked for me!
here is example of dropdown toggle menu for you:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown profile_menu">
<span>Hello</span><b class="caret"></b>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Go to Profile</li>
<li>Log off</li>
</ul>
</li>
</ul>
Related
I am attempting to use Bootstrap to build a navbar for my website. I am have tried to use the toggling feature that allows the menu to be more accessible on mobile devices. When I zoom in to 200% on my browser, it toggles fine and works great. When I connect to my site on my phone however, it fails to automatically toggle.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="index.php"><i class="fa fa-server"></i> Server List</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Servers</li>
<li class="dropdown">
Purchase<b class="caret"></b>
<ul class="dropdown-menu">
<li>Highlighted Spot</li>
<li>Advertising</li>
</ul>
</li>
<li>Support</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>My Servers</li>
<li>Favorites</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
I've tried everything I've found online to no avail, so I greatly thank anyone who helps me out with this!
I've made a website using bootstrap, I don't know much about this framework. What I'm having difficulty with is styling the navbar.
What I would like to do is move the name, and three titles, 'work', 'about', and 'contact', to the left corner of the page, and move the social media icons, to the right corner of the page. Could someone instruct me on how I could do this while still retaining the functions that bootstrap offers?
Here is a jsfiddle: https://jsfiddle.net/3kq7ptxd/
The jsfiddle looks different from the actual website, so if you go on paulopinzon.com you will maybe get a clearer idea of what I'm attempting.
Thanks for taking the time! I will try to experiment with things in the mean time, but if someone with more experience could help that would be much appreciated.
Have a good day
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Paulo Pinzon-Iradian
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
</li>
<li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
</li>
<li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
</li>
</ul>
</div>
</div>
</nav>
Change the navbar .container to .container-fluid.
Basically .container-fluid continuously re-sizes on change of viewport and leaves no extra empty space on the sides ever, unlike .container.
.container-fluid has the CSS property width: 100%;, so it continually readjusts at every screen width granularity.
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Paulo Pinzon-Iradian
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Work
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
</li>
<li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
</li>
<li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
</li>
</ul>
</div>
</div>
</nav>
CODEPEN DEMO
Try to add following code to your css styles, did it what you wanted to?
nav .container {
margin: 0 auto;
width: 100%;
}
from
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
to
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
On smaller devices the text ("JH") currently moves underneath the collapsed menu toggle on the left side of the navbar - is there a way to align it so that "JH" is level with the menu toggle but on the right side of the navbar instead? I'm struggling with how to achieve this but I'm sure it's very simple. Many thanks in advance, Jon
My code is as follows:-
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>
<span>About</span>
</li>
<li>
<span>Resume</span>
</li>
<li>
<span>Portfolio</span>
</li>
<li>
<span>Blog</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
http://www.jonhowlett.uk/
Put this
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
inside <div class="navbar-header">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
</div>
You're navbar has add HTML that shouldn't be necessary. See docs.
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
If you want to add a background color to the brand, just use CSS. See example.
.navbar.navbar-custom .navbar-brand {
background: #e7e7e7;
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="http://www.jonhowlett.uk/home.html">JH</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li> <span>About</span>
</li>
<li> <span>Resume</span>
</li>
<li> <span>Portfolio</span>
</li>
<li> <span>Blog</span>
</li>
<li> <span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
I'm trying to make a navbar using bootstrap to my own needs, but have stumbled upon a problem.
I want the first two links from the left (home and menu glyphicons) to not collapse when window is sized down. The rest would collapse.
Screenshot link
enter link description here
Here is my code
<template name="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><a class="navbar-nav" href="{{pathFor 'home'}}"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a class="navbar-nav" id="showMenu" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav">
<li class="{{activeRouteClass 'home' 'newPosts'}}">
New
</li>
<li class="{{activeRouteClass 'bestPosts'}}">
Best
</li>
{{#if currentUser}}
<li class="{{activeRouteClass 'postSubmit'}}">
Submit Post
</li>
<li class="dropdown">
{{> notifications}}
</li>
{{/if}}
</ul>
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}}
</ul>
</div>
</div>
</nav>
</template>
Move them into a separate <ul> object without the nav navbar-nav classes in order to disable this behaviour.
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