I have moved some buttons around on my navbar, and now it isn't filling the container width fully.
<div class="container">
<div class="header-nav-bar home-slide">
<nav>
<button><i class="fa fa-bars"></i></button>
<ul class="primary-nav list-unstyled">
<li class="bg-color">Home</li>
<li class="">Company</li>
<li>Price</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
<li>Terms</li>
</ul>
</nav>
</div>
</div>
I have tried to use "container-fluid" however there doesn't appear to be anything that has changed regarding width of the buttons.
The size of the container which the buttons are meant to fill evenly is 1140px in width on a 1920 x 1080 monitor.
Thanks for your time.
Are you looking for this? Otherwise reply me.
<!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.5/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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button> <i class="fa fa-bars"></i></button>
</div>
<div>
<ul class="nav navbar-nav">
<li class="bg-color">Home<i class="fa fa-angle-down"></i>
<li>Home</li>
</li>
<li class="">Company<i class="fa fa-angle-down"></i>
<li>Newsletter</li>
</li>
<li>Search Page</li>
<li> Blog<i class="fa fa-angle-down"></i>
<li>Blog list</li>
<li>Blog-post</li>
<li>Price</li>
<li>About Us</li>
<li>Contact Us</li>
</div>
</div>
</nav>
</body>
</html>
Related
I created a navbar, the navbar items collapse on small devices and can be seen through pressing a button that shows the items as a sidenav, the issue i'm having is that I'm not able to click any of the links, it shows the sidenav but everything is disabled, I'm going to show the snippet to explain this better.
<!-- This is a free template created by the github user NeutronBlast, please don't erase this -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper teal">
<!-- Your logo here! -->
<a href="#" class="brand-logo ml-nav-4 mt-2">L
</a>
<!-- Trigger button for collapsible menu on phone view -->
<a href="#" data-target="menu-responsive" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>ABOUT US</li>
<li>FEATURES</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
<!-- Menu that will be shown on small devices -->
<ul class="sidenav" id="menu-responsive">
<li>ABOUT US</li>
<li>LINK</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</div>
<!-- Compiled and minified JavaScript -->
<script type="application/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
M.AutoInit();
});
</script>
</body>
</html>
Note: I realized that removing the div with the class navbar-fixed solves the problem of the sidenav being disabled but I need the navbar to be fixed on desktop, so simply removing that it's not enough of a solution for me.
You'll want to keep the sidenav markup outside of the navbar markup...
<!-- Navbar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper teal">
<!-- Your logo here! -->
L
<!-- Trigger button for collapsible menu on phone view -->
<a href="#" data-target="menu-responsive" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>ABOUT US</li>
<li>FEATURES</li>
..
</ul>
</div>
</nav>
</div>
<!-- Menu that will be shown on small devices -->
<ul class="sidenav" id="menu-responsive">
<li>ABOUT US</li>
<li>LINK</li>
...
</ul>
https://codeply.com/p/IsB0HvAEJy
The image is getting covered by the menu even when I add the CSS code to give it a space. Then I just have a blue space above my menu but no image. I get a flash like it is loading it and then covering it.
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1</li>
<li>Planets 1-2</li>
<li>Moons 1-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS bit
body {
padding-top: 90px;
background-color: #aabbcc;
}
edit
I just added some more code in case the error is there.
<!DOCTYPE html>
<html>
<head>
<title>Journey To The Stars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="container">
Found my own answer!
Adblock Plus was blocking the picture. Now I need to learn why...
Edit:
Now I know why. It blocks "728x90". I added that to the name because my research showed it was the most common header picture size. Must be the most common ad size as well.
The problem is even after adding the padding: 90px; to the body, the header will be rendered after it, so you achieved nothing unless you use absolute positioning for example, try the snippet below:
body {
padding-top: 90px;
background-color: #aabbcc;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1
</li>
<li>Planets 1-2
</li>
<li>Moons 1-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
#media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.
A few things to consider.
Make sure the CSS selector matches the rule you want to override in the bootstrap file exactly. So if div > a > span don't go div > span
Make sure the bootstrap file isn't using the keyword !important
Add a type="text/css" to the bootstrap link
lastly, see if it works if you put the keyword !important
I'm trying to use foundation to build a navigation menu. The black bar loads with my content, but some features don't work. For example, the drop down menu doesn't work when the mouse hovers over it. Also the proper mouseover effects arent working. Am I forgetting something?
http://jsfiddle.net/Sbt75/755/
Here is my code
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<!--Jquery-->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!--Foundation-->
<script src="js/foundation.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/foundation.css" type="text/css" />
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="contain-to-grid sticky">
<nav class="top-bar" role="navigation" data-options="is_hover: true">
<ul class="title-area">
<li class="name">
<h1>VoIP Innovations</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Origination</li>
<li>Termination</li>
<li>E911</li>
<li>Hosted Billing</li>
</ul>
</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
</ul>
</section>
</nav>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script>
$(document).foundation();
</script>
Here is working Fiddle.
Firstly, you have to put data-topbar attribute into your nav element.
Secondly, you have to put li with menu into your code:
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
Whole HTML:
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
<ul class="title-area">
<li class="name">
<h1>
VoIP Innovations
</h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>
Origination
</li>
<li>
Termination
</li>
<li>
E911
</li>
<li>
Hosted Billing
</li>
</ul>
</li>
<li>
Nav 2
</li>
<li>
Nav 3
</li>
<li>
Nav 4
</li>
<li>
Nav 5
</li>
</ul>
</section>
</nav>
Hey I think you are missing one atribute, before role="navigation" on the nav tag, add data-topbar
so it would look like this
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
Haven't found anything else missing
Here is the way that the foundation documents use:
<nav class="top-bar" data-topbar role="navigation">
Try changing your nav tag out with this and let me know what happens.
I have a very simple navbar code. But on putting this
<ul class="nav navbar-nav navbar-right">
this is being rendered in the next row of the nav-bar instead of the same row on the right hand side. Can anyone please tell me what am i doing wrong.
Image attached.
Below is my code.
![<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APP_NAME</title>
<link href="${pageContext.request.contextPath}/css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/bootstrap/bootstrap-theme.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</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>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div>
</nav>
</body>
</html>][2]
If you meant something like my example above then just remove the navbar-right.
<ul class="nav navbar-nav">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>