I have a portfolio website with a few nav items for different views. I basically copied the default nav code from the bootstrap site. When I expand my "hamburger" the nav remains the same size, hence making the expanded items overlap with the border of my nav. Like this:
I can't seem to find anything on the Bootstrap site to deal with this issue. Does it have to do with my border being there?
Here's my nav code:
.navbar{
height: 10.0rem;
border-bottom: 1px solid rgb(168, 168, 168);
}
.bg-light {
background-color: white !important;
}
.navbar-collapse{
padding-left: 0;
}
#options{
list-style-position: inside;
padding-left: 12rem;
}
#options li{
padding-left: 1rem;
padding-right: 1rem;
font-size: 1.2rem;
font-family: Raleway;
}
li a:hover{
border-bottom: 0.001rem solid black;
}
.navbar-brand{
font-size: 4rem;
padding-left: 3rem;
font-family: Raleway;
font-weight: 400;
}
#header-container {
display: flex;
flex-direction: row-reverse;
justify-content: right;
width: 50%;
height: 50%;
margin: 0 0 0 10%;
padding-left: 30%;
}
html{
height: fit-content;
}
body {
padding-top: 5.0rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alan Alban - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Alan Alban</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<section id="header-container">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" id="options">
<li class="nav-item active">
<a class="nav-link" href="/">Experience <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/skills">Skills</a>
</li>
</ul>
</div>
</section>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I appreciate the help in advance
You are only importing the jquery.min.js but you should import the bootatrap.min.js too.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
This is the full script you should place at the bottom of your body, just before the tag ends.
And move your css in your head tag.
Read the official documentation that will help you getting started, most of the answer are always there.
https://getbootstrap.com/docs/4.5/getting-started/introduction/
You can find there also good working examples that will help you getting started in a proper way.
I figured out what the problem was.
.navbar{
height: 10.0rem;
border-bottom: 1px solid rgb(168, 168, 168);
}
That snippet is how I intended to modify the initial width of my navbar. I removed the height property and it works fine now.
My guess is, by setting a height, I'm essentially anchoring the nav to a specific size. I'm gonna try min height and see if that works. it looks good as it is though since I have padding for my nav elements.
Related
I have tried to use padding, text align-center, float, and margins but nothing seems to work, the list items all remain fixed. Is it a conflict with bootstrap's CSS or JS? I'm very new to bootstrap and relatively new to CSS and HTML so I might have missed something, but I cant seem to find anything else on this problem.
Heres my code (sorry for the messy comments):
/*controls the style of the entire navbar, including border and background clr*/
.navbar.navbar-default {
background-color: #D9D9D9;
border-color: #143DAF;
border-style: groove;
border-width: 5px;
text-align: center;
}
/*Controls the styles of the navbar brand, or the logo in the center*/
.navbar.navbar-default .navbar-brand {
color: #292929;
}
/*IDK, come back later but apears to have something to do with navbar brand hover*/
.navbar.navbar-default .navbar-brand:hover,
.navbar.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: #ffffff;
}
.navbar .navbar-center > ul {
padding-left: 30px;
padding-right: 30px;
text-align: center;
align-content: center;
float: right;
}
/*Again, IDK what this does, tho i think it is text, pottentially is being overwritten by the one below*/
.navbar.navbar-default .navbar-text {
color: #292929;
background-color: #000000;
}
/*will change the styles of all links within a list and a navbar, including the fb and ig logos*/
.navbar.navbar-default .navbar-nav > li > a {
color: #292929;
}
/*Link styling for when you hover over them*/
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
color: #6765eb;
}
/*Changes the color of the links when you hover over them when the active class is equiped*/
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
color: #6765eb;
background-color: #ffffff;
}
/*changes the color of the links when you hover over them with the active class*/
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
color: #ffd4d4;
background-color: #ffffff;
}
/*Hamburger Styling*/
.navbar.navbar-default .navbar-toggle {
border-color: #D9D9D9;
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus {
background-color: #D9D9D9;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
background-color: #292929;
}
.navbar.navbar-default .navbar-link {
color: #292929;
}
/*HAMBURGER OVER*/
/*changes the color of the links when you hover over them*/
.navbar.navbar-default .navbar-link:hover {
color: #ffd4d4;
}
/*Adjusts the position and aditional styles of the navbar brand (logo)*/
.navbar-brand {
transform: translateX(-50%);
left: 7%;
position: absolute;
padding: 0px;
}
/*Changes the style of the navbar, including the fonts*/
.nav.navbar-nav > li.navbar-center {
font-family: 'Nunito Sans', sans-serif;
font-size: 11px;
}
.navbar-brand > img {
height: 90%;
width: auto;
}
/*Adjust padding and position of the nav*/
#media (min-width:768px) and (max-width:991px){
.container.navbar-container {
width:100%;
padding:0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> My Website</title>
<!--Gives access to ig fb pintrest & twitter--><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<!---Bootstrap CSS & JS---->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container navbar-container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<!---"Hamburger" drop-down menu--->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-----Logo (right now its the settings wheel)----->
<a class="navbar-brand" href="http://jh.com"><img class= "logo" src="https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-2/128/settings-gear2-512.png"></a>
</div>
<!---The ul and links of the navbar--->
<div id="navbar" class="navbar-collapse collapse">
<!--The html links, navbar-left specifies that they will be on the left side of the bar, and is also used for txt styling-->
<ul class="nav navbar-nav">
<li class="navbar-center">HOME</li>
<li class="navbar-center"> INFORMATION</li>
<li class="navbar-center"> HISTORY </li>
<li class="navbar-center"> ATTRACTIONS </li>
<li class="navbar-center"> GALLERIES </li>
<li class="navbar-center"> CONTACT US </li>
</ul>
<!--similar to above, except this is used for ig fb and twitter logos+links, navbar-right is in the opening <div> since it isn't needed for txt styling anymore-->
<ul class="nav navbar-nav navbar-right">
<li> <i class="fa fa-instagram"></i>
<li> <i class="fa fa-pinterest"></i>
<li> <i class="fa fa-facebook"></i>
<li> <i class="fa fa-twitter"></i>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
</body>
</html>
Your provided html is not valid. If you look at .navbar-right, you've not closed any of the list elements.
I'm not sure if your working Bootstrap 4 or Bootstrap 3... Your question is tagged bootstrap-4, but your question code and external libraries seem to be bootstrap-3?
So my solution below is based on the latest Bootstrap 3.4.1.
Inline comments are great... but personally I would not directly write comments in HTML code because anyone who views your source code
can read them! Code comments like yours should only be used in
uncompiled src files (js/css) and server side files (php, etc).
OK, we are using Bootstrap 3 below, so the css methods are kinda old school. There is no flexbox css usage (flexbox css model was first introduced in Bootstrap 4).
Changes I've made to your HTML and CSS...
Added helper CSS to show you which bootstrap breakpoint your viewing in current viewport.
Cleaned up and closed all HTML tags so HTML code is valid.
Changed navbar text to normal titlecase and used css to make uppercase (see css comments).
Removed all unnecessary container divs and css classes.
Added a few custom CSS classes and media queries to achieve your desired output.
Changed Contact us to Contact so you get you seamless breakpoint from SM to XS.
Added a few css tweeks to tighten up navbar/social link padding/font-size when responsively downsizing the viewport.
Here is a jsfiddle version too...
https://jsfiddle.net/joshmoto/6xtjg4mz/
Anyway hope this helps...
/** 'XS' mode navbar ul margins **/
.nav.navbar-nav {
margin: 5px -15px;
}
/** so navbar links text appear normal on google but uppercase on the website **/
.nav.navbar-nav:not(.navbar-social) > li > a {
text-transform: uppercase;
}
/** margins in 'XS' mode and bigger socials icons at 28px **/
.nav.navbar-social {
margin: 10px 0 10px -8px;
overflow: hidden;
font-size: 28px;
}
/** always float left social icons so they dont stack in 'XS' mode **/
.nav.navbar-social > li {
float: left !important;
}
/** same left and right gaps between social icons **/
.nav.navbar-social > li > a {
padding: 15px 8px !important;
}
/** screen size large 'SM' and up **/
#media (min-width: 768px) {
/** 'SM' and up: navbar ul margin force 0 **/
.nav.navbar-nav {
margin: 0 !important;
}
/** 'SM' and up: navbar list links padding **/
.nav.navbar-nav > li > a {
padding: 15px 8px;
}
/** 'SM' and up: social list smaller icons at 20px **/
.nav.navbar-social {
font-size: 20px;
}
}
/** screen size large 'MD' and up **/
#media (min-width: 992px) {
/** 'MD' and up: navbar list links padding (default padding) **/
.nav.navbar-nav > li > a {
padding: 15px 15px;
}
}
/** helper css below **/
/** helper breakpoint indicator screen size large 'XS' and up **/
body::before {
text-transform: lowercase;
position: fixed;
z-index: 10000;
background: red;
font-family: 'Courier New', Courier, monospace;
font-size: 50px;
right: 0;
bottom: 0;
color: white;
padding: 2px 20px;
font-weight: bold;
content: 'XS';
}
/** helper breakpoint indicator screen size large 'SM' and up **/
#media (min-width: 768px) {
body::before {
content: 'SM';
}
}
/** helper breakpoint indicator screen size large 'MD' and up **/
#media (min-width: 992px) {
body::before {
content: 'MD';
}
}
/** helper breakpoint indicator screen size large 'LG' and up **/
#media (min-width: 1200px) {
body::before {
content: 'LG';
}
}
<!-- Fonts & Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<header>
<nav class="navbar navbar-default">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://jh.com">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Information</li>
<li>History</li>
<li>Attractions</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-social">
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-pinterest"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</div>
</div>
</nav>
</header>
I have a navigation bar, and I was wondering if it is possible to change the hover size in bootstrap 4? I want to make the size of the background on the menu links smaller. I have tried this method: How do i change the width of the hover in bs4 , but it does not work for me.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cuppela</title>
<script src="https://www.cuppela.com/cuppela/js/jquery.min.js" type="text/javascript"></script>
<script src="https://www.cuppela.com/cuppela/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.cuppela.com/cuppela/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
<nav id="main-nav" class="navbar navbar-expand-md fixed-top">
<div class="container">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="top-main">
<div id="top_text">
<h1>Cuppela Made With Sugar</h1>
<p>Delicious Homemade Cakes</p>
</div>
</div>
</div>
<div>
<h2>Test</h2>
</div>
</body>
</html>
This is my css:
body{
margin: 0px;
}
li a:hover {
background-color: #ff9900;
border-radius: 10px;
}
li a{
color: white !important;
}
#top-main{
background-image: url(../images/cake_six_two.jpg);
height: 100vh;
}
#nav-menu{
font-size: x-large;
position: relative;
}
#top_text{
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
h1{
font-size: 500%;
}
p{
font-size: x-large;
}
h2{
text-align: center;
}
Edit: Added more description.
I suppose you want to change the size of the background on the menu links when you :hover over them. If that is the case, edit the padding of .nav-link (or remove the padding line completely) and you will end up with something like this:
As you can see no padding at all will give the impression of a bit more orange background above the links than below. This is a common quirk with padding in CSS, so I recommend you add for example padding: 0 0 .2rem which translates into zero padding on the top, right and left, and 0.2rem padding at the bottom of the element.
Result will then be:
You didn't clearly mention what you want, but if you want to change the font size, you can simply do font-size: 12px or any pixels you want. If you want to change the anchor tag's width, then you can decrease the padding like
.navbar .navbar-nav .nav-item .nav-link { padding: 5px // or anything you want, you can also make it 0 }
I need help with my horizontal nav-bar that is at the top of my webpage.I am using a CSS animation to make my nav-button's font-size increase on focus and hover. I only want my nav-bar to move when nav-items are focused or hovered. My only problem is that the content beneath the nav-bar moves down when my nav-button is focused or hovered. I only need help with making the content beneath my nav-bar unaffected by the growing font-size of my focused or hovered nav-buttons.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: inline;
text-align: center;
}
.navbar li{
display: inline;
}
.nav-link a {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
}
.nav-link a:hover, .nav-link a:focus {
animation: grow 0.5s;
animation-fill-mode: forwards;
}
/*nav-bar css ends here*/
Here's the HTML below for one of the webpages on my website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link"><a class="nav-link"
href="index.html">Bio</a></li>
<li class="nav-link"><a class="nav-link" href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a class="nav-link" href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a class="nav-link" href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
You could try putting a position: absolute on your ul tag and start from there.
I had to modify your code to get the desired result. I used transform: scale() to increase the font-size without affecting the buttons. Apparently if you use display: inline then scale() will not work so I changed around your code and use flexbox properties. Also there were a few issues with your html, you declared the class nav-link on both your a and li, so I removed the class from a. Hope this works for you.
/*NAVBAR CSS STARTS HERE*/
nav {
margin-left: 15%;
}
.navbar {
list-style: none;
padding: 0px;
overflow: hidden;
display: flex;
text-align: center;
}
.nav-link {
margin-left: 1%;
padding: 14px 30px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.548);
font-size: 20px;
color: rgb(255, 255, 255);
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
transition: transform .5s;
}
.nav-link a {
display: block;
color: white;
text-decoration: none;
}
.nav-link a:hover{
transform: scale(1.2);
}
/*nav-bar css ends here*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="author" content="Maurice Rogers">
<title>My Short Bio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="backgroundImg">
<header id="page-top">
<h1><span>Maurice Rogers</span></h1>
<nav>
<ul class="navbar">
<li class="nav-link">Bio</li>
<li class="nav-link"><a href="technical-
resume.html">Technical Resume</a></li>
<li class="nav-link"><a href="my-
animations.html">Animations</a></li>
<li class="nav-link"><a href="me-
surfing.html">Surfing</a></li>
</ul>
</nav>
</header>
<main>
<br/>
<h2><span>My Bio</span></h2>
<br/>
<div class="box">
<p>I love to code. I find it to be very fun, interesting, and
rewarding. You can <a href="technical-resume.html"
accesskey="t">find my Technical Resume here</a>. I also have other
cool interests. I've spent many hours making animations. You can
<a href="my-animations.html" accesskey="a">view my animations
here</a>. I've been surfing all my life. It really is one of my
favorite things to do. You can <a href="me-surfing.html"
accesskey="s">see me surfing here</a>.</p>
</div>
</main>
<footer>
<nav>
<a class="ftr-nav-link" href="index.html">Back to top</a>
</nav>
<h4 class="copy-right">© 2021 Maurice Rogers</h4>
</footer>
</div>
</body>
</html>
The navigation on my desktop version looks fine when I remove the clear from the mobile version. But when I do, the collapsed menu on my mobile version is bugged. Yet I can't seem to set my clear to default in my media query. I've tried float and position:relative but nothing seems to work to get my brand and my navigation on the same line.
#media only screen and(min-width:786px){
.custom-navbar .navbar-collapse {
clear:none;
}
EDIT: here's a minimal 'working' example: Codepen
You need to restructure your HTML. You have your SVG as in lieu of a button, it should be place inside the toggle-button which is then inside the navbar-header, not after. Also, navbar-right belongs with the ul, not navbar-collpase.
See Docs and working Snippet.
body {
font-size: 62.5%;
}
.navbar.custom-navbar .navbar-nav li a {
font-family: 'Open Sans', sans-serif;
color: #DFBA68;
font-size: 1rem;
}
.navbar.custom-navbar {
background-color: #252626;
}
.navbar.custom-navbar .navbar-brand {
font-family: 'sharpie';
color: #DFBA68;
}
.navbar.custom-navbar .navbar-brand:hover {
color: #DFBA68;
}
.navbar.custom-navbar .navbar-toggle {
z-index: 1;
padding: 0;
margin-top: 10px;
margin-left: 15px;
float: left;
}
<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-fixed-top custom-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<svg height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M0,40C0,40,100,40,100,40C100,40,100,60,100,60C100,60,0,60,0,60" fill="#f7f4ea"></path>
<path d="M0,20C0,20,100,20,100,20M100,80C100,80,0,80,0,80" stroke="#dfba68" style="stroke-width: 4px;"></path>
</svg>
</button> <a class="navbar-brand" rel="home" title="Help">Hannelore Goovaerts.be</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</nav>
Remove clear:both from .custom-navbar .navbar-collapse. clear:both; force an element to be placed in the new line after the elements which have float:right; or float:left;.
Codepen
.custom-navbar .navbar-collapse {
/* clear: both; */
float: none;
}
Here is the HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<nav class="navbar navbar-inverse">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> </a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">HOME </li>
<li>ABOUT</li>
<li>WORK</li>
<li>RESUME</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="headline">
<header class="span8">
<h1>Headline goes here</h1>
</header>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In the CSS, I have nothing about the positioning changed or anything—just colors and spacing and whatnot. I have the .navbar .nav > ul property set to display:box; could that be affecting it?
Let me know if you need more info
Here's the jsfiddle, without bootstrap files: http://jsfiddle.net/6PRhf
Using the following styles will space out the nav bar items, depending on how you want some styles to look you can customize it. But this should be close to what you want hopefully.
CSS File
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, .75);
border-right: 1px solid rgba(0, 0, 0, .1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
Similar Stack Overflow question
Bootstrap navbar justify / span menu items occupying full width
Fix the navigation bar on the page, use the following
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>