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">
Related
I have the following html, which features a bootstrap nav bar. As you can see, there is a menu item called "Coverage" with one link called "Add Coverage". This works fine on larger screens, but when I resize to make it smaller, as expected the Toggle navigation appears. When I click this and the menu expands to show everything, the Funds, Intraday Orders, and Reports still work fine, however clicking on the Coverage item does NOT result in the Add Coverage link being shown. Nothing happens. What am I doing wrong?
<body>
<nav class="navbar navbar-default navbar-static-top" style="padding: 0px;">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand pull-left" href="#Url.Action("Index", "Home", new { goHome = "true" })"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="navbar-header">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-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>
</div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav pull-left menu-item-spacing">
<li>#Html.ActionLink("Analysts", "Index", "Analyst")</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Add Coverage", "AddCoverageSearch", "Coverage")</li>
</ul>
</li>
<li>#Html.ActionLink("Funds", "List", "Holding", null, null)</li>
<li>#Html.ActionLink("Intraday Orders", "Account", "Blotter", new { analystname = #user.UserName }, null)</li>
<li>Reports</li>
</ul>
</div>
</div>
</div>
</nav>
HTML created is as follows:
<nav class="navbar navbar-default navbar-fixed-top" style="padding: 0px;">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand pull-left" href="/?goHome=true"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="navbar-header">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-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>
</div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav pull-left menu-item-spacing">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</div>
</nav>
The structure of the code you've presented seems very atypical for Bootstrap. For example, you have your .navbar-toggle inside a duplicate of .navbar-header which also houses your .collapse.
If you were to restructure your Navbar component to better match the recommendations and styles of Bootstrap 3.x you would use code like below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#null"><span class="glyphicon glyphicon-home"></span></a>
<button type="button" data-toggle="collapse" data-target=".navbar-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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</div>
</nav>
In the above code every link under .dropdown-menu appears as expected. The entire navigational menu collapses on smaller screens, again as expected. If the above code results in a different result when inserted into your project I would suspect the problem is some additional CSS or JavaScript that is in conflict.
Two Caveats I would offer:
(1) The above code assumes you're using Bootstrap 3.x. This is based on some of the classes called in your code which do not exist in 4.x. If you're using 4.x that might also be causing some of your problems as the structure for the Navbar component has changed.
(2) For the purposes of a minified example I've removed a lot of additional styles or references to classes that aren't part of Bootstrap. I've also removed the class="dropdown-toggle hidden-sxm" from under the "Reports" link as that link is not a dropdown menu and hidden-sxm is not a Bootstrap class.
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>
I have a navigation bar and when I make the screen size smaller, the list items overlap into the left of the navigation where there is the logo instead of keeping to their positions. Here is the HTML code:
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<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="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
Can someone please point out where I am going wrong or what I am missing. I have the viewport meta tag and the other parts of the page are responsive.
Coppy code below and paste your editor.
You try it work fine.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<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="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
</body>
</html>
adding an id just before the unordered list would also fix it.
<div id="navbar" class="navbar-collapse collapse">...</div>
and then set data-target="#navbar"
also, you should add this class to your button. class="collapsed"
Here is an example from my own site, which works
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
You also don't need container-fluid
// DROP IN THIS AND TELL ME IF IT WORKS
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top mega navbar-trans navbar-fw">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Navbar Links -->
<div id="navbar" class="navbar-collapse collapse page-scroll navbar-right">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li>About<span class="sr-only"></span></li>
<li>Services<span class="sr-only"></span></li>
<li>Portfolio<span class="sr-only"></span></li>
<li>Pricing<span class="sr-only"></span></li>
<li>Contact<span class="sr-only"></span></li>
</ul>
</div>
</nav>
I am new to bootstrap.
This is the design I am trying to make:
As you can see the navbar is on top op the background image.
This is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<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.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
<style>
.navbar-default {
background: none;
border: none;
}
body{
height:100%;
}
html{
background: url('sun.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: 0 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
</div>
</nav>
</body>
</html>
gives:
I don't know how to put it on the image itself instead of above.
short sidequestion: what makes it that the picture from vimeo makes it look so much better than the image I use from the sun? on my image you can see all the pixels etc... Is this due to the fact that it might be a too small image and that it has to be stretched a lot to fit the whole page?
EDIT:
this is what I tried but didn't work
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
<style>
.navbar{
background:transparent;
}
</style>
</div>
</nav>
Bootstrap 4
The Navbar has no background color, so it's transparent by default. Just remember to use navbar-light or navbar-dark so the link colors work with the contrast of the background image. Display of the toggler is also based on navbar-(dark or light).
https://www.codeply.com/go/FTDyj4KZlQ
<nav class="navbar navbar-expand-sm fixed-top navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap 3
Use navbar-fixed-top and then change the CSS to make it transparent. Here's an example of a custom transparent navbar.
http://www.codeply.com/go/JNy8BtYSem
<nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
<div class="container">
<div class="navbar-header">
Brand
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
Link
</li>
</ul>
</div>
</div>
</nav>
This question is only to make the transparent Navbar. To change style after scrolling or at some Navbar position see: Animate/Shrink NavBar on scroll using Bootstrap 4
You need to remove the background from your nav-bar:
.navbar-default {
background: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
background: red;
}
.navbar-default {
background: none;
border: none;
}
</style>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Just take the backgound image in Body and then use this code
<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=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Username</li>
</ul>
</div>
</div>
</div>
<div class="wide">
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
<div class="container">
<div class="text-center">
<h1>Content</h1>
</div>
</div>
Also used styling style="opacity:0.6;" in Navbar div
The background colour is set on the .navbar-default class so make sure your css is using that class to target turning the bar transparent. e.g.
.navbar-default{background-color: transparent;}
As Turnip states, this needs to be applied after the bootstrap styles in your <head>
If you really want to force it whilst you are getting it to work add the following attribute to your <nav> element
style="background-color: transparent;"
So your nav element looks like this:
<nav class="navbar navbar-default" style="background-color: transparent;">
However, it obviously better to have this within a CSS file, rather than as inline HTML
.navbar{
background:transparent;
}
This will make your background transparent.
I have a bootstrap 3 collapse menu.
It looks like this in iphone:
Here is the code:
<div class="navbar navbar-fixed-top visible-phone">
<div class="navbar-inner">
<div class="container">
<!--Button to collapse the Navigation-->
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<img src="images/expand-menu-button.png"></a>
<div class="nav-collapse collapse">
<ul class="nav nav-justified">
<li>Velkommen</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Personale"</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
But I need to show normal menu in ipad and desktop. Now this menu button applying for ipad and desktop as well. How can I overcome that issue?
Take a look at this, maybe it'll help. If you scale it in your desktop window it'll appropriately jump to mobile display when necessary.
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
Welcome
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</nav>
I believe the problem is in your navbar class. You are missing role="navigation" which makes the navbar accessible from different devices and sizes. You should not need the visible-phone either.
Change:
<div class="navbar navbar-fixed-top visible-phone">
To:
<div class="navbar navbar-fixed-top visible-phone" role="navigation">
Another problem may be fixed by changing:
<div class="nav-collapse collapse">
To:
<div class="collapse navbar-collapse">
Possibly you're missing the viewport meta tag that's used to enable responsiveness, as mentioned in the Bootstrap docs?:
<meta name="viewport" content="width=device-width, initial-scale=1">