Here is the MarkUp:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Kellumonline
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</li>
<li><a href="tech/index.html">Tech</li>
<li>Gaming</li>
<li>Skate</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Website where the code is currently published on
I have no CSS styling any of the containers or elements. I seriously have like 3 styles:
one is pulling a font from Google,
the second is specifying a width and height for my jumbotron,
the third is specifying the margin for my 3 columns at the bottom of
my home page.
I am working on my website and need some help figuring out why my navbar links are spaced the way they are.
Also, my contact page is not displaying correctly and it has the same code in it as the other pages.
Any help, feedback or constructive criticism is much appreciated.
Thanks
It's very stupid...
The navbar in your contact page has this following class:
class="navbar navbar-incerse navbar-static"
So
Change incerse by inverse
Looking at it, I can see the the Home link and the Tech link don't have their closing </a> tags. Add those in and that should sort it out.
Also, #yenne-info has the correct answer to your Contact page issue.
Related
I'm trying to make dropdown navbar box black, I've been looking for solution for 2 days, but still even templates from bootstrap docs doesn't work properly, I mean that dropdown box.
Here is my html code for navbar:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
<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 navbar-link"><img src="/images /logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Courses </li>
<li role="presentation">Help
<a class="visible-sm-block" href="#"> </a>
</li>
</ul>
</div>
</div>
</nav>
Here is Page hierarchy:
You're correctly using .navbar-inverse, which should already be making your navbar black, as can be seen here.
There are a couple of reasons why this may not be working for you.
You've not referenced Bootstrap correctly.In this case, check for errors in your F12 Developer Tools' console.
You're using CSS for a different version of Bootstrap than the one you've loaded.
You have code that is overriding the defaults with higher specificity.
You have cached outdated CSS. Refresh your stylesheet refrence with CTRL + F5, and hold SHIFT while clicking on the refresh icon to ensure you clear your CSS cache as well.
Hope this helps! :)
Hello I have been given two examples when for coding a navbar in bootstrap3. I am not sure what the difference is I know example 1 is fixed and responsive but ex 1 is in a <div> and ex 2 is set in a header. Confusing as they both work, but which is better.
Example 1
<!-- Fixed navbar -->
<div class="navbar navbar-default 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>
<a class="navbar-brand" href="#">COMPANY</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Welcome</li>
<li>Create</li>
<li class="dropdown">
lorem<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header"> lorem</li>
<li class="dropdown-header">lorem</li
<li class="divider"></li>
<li class="dropdown-header">lorem</li>
<li class="dropdown-header">lorem</li>
<li class="divider"></li>
<li class="dropdown-header">lorem</li>
<li class="dropdown-header">lorem</li>
</ul>
</li>
<li>Dashboard</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Example two:
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img"></div>
</a>
<div class="navbar-brand">
<h1>David Chu's China Bistro</h1>
<p>
<img src="images/star-k-logo.png" alt="Kosher certification">
<span>Kosher Certified</span>
</p>
</div>
</div>
</div>
</nav>
</header>
The difference is quite clear. Second snippet of code belongs to a simple Navbar using bootstrap. Whereas the first one is the fixed Navbar that you'd mostly seen on top of websites. It includes dummy navigational data in the form of list items.
You can use online editors like jsfiddle and plnkr for practicing and viewing results of these examples.
Read more and in detail about bootstrap navbar here.
In example one, it is more advanced and complex, it has bunch of lists that appears to the viewer of the website, so it has more options than example two.
In example two, there are just bunch of images and links and some space for a logo. It just looks like a header of the page, I mean the very top of it.
The first example tho, looks like a content which can either be the header, or the descriptive part that comes after header. So it can either be placed in body part or header part, depends on how the coder wants to put it as. Sorry it is kind of confusing.
Remember, a content being in a header or a body tag doesn't change anything specifically, it just divides the code into parts and makes it easier to understand.
I have a form wherein the user may search for example a name. after searching a table will come out. It works perfectly in the desktop but as you know I used bootstrap and it is responsive and usable in a mobile device. Now when I adjust the window size the nav bar collapses, design changes and becomes a mobile version. But then the table cannot go as small as the screen and it causes overflow on the right side. It cant go smaller because the words are long and cant we word wrapped with space because there is no space. So how do I make my nav bar and footer stretch to the width of the overflow?here is my sample interface...
<nav class="navbar navbar-inverse navbar-static-top" style="">
<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="#">Envoy Search Rackings</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="<?php if(strpos($currentpage,"profile")==TRUE) {print $active;}
?>">Search Database</li>
<li class="<?php if(strpos($currentpage,"insert")==TRUE) {print $active;}
?>">Add Brochure</li>
<li>Export Data Modified</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
</div>
</nav>
and here is my nav bar code. my footer has no content yet so i'll just copy the code from navbar to strech just in case. Thank you very much! sorry if i explained too long!
If anybody stumbles over this and just wants to make the table fit the device width:
Use
<div class="table-responsive"> ... </div>
around your <table> tags.
Not sure if this is what the OP wants, but I hope it helps anyone anyway :D
I wouldn't recommend stretching the nav and footer to full width as of table because user wouldn't be able see the menu button in the nav bar in first fold as it would be to the far right under scroll fold.
Basically for tables you will have to fix the container width to 100% and add overflow:auto scrollbar so user can scroll/slide just the table part to see more rather than the whole page.
I am trying to use the Boostrap 3 grid system. I have a navigation header that i'm trying to customize in the regular desktop screen resolution. The columns work fine until I size the screen down to about 1200px wide. Then the left two links - a button and a regular link start stacking. I don't know how to resolve this. When I change the column sizes the middle column menu links start stacking which I don't want either. I feel like I am missing something really basic here. And I am a newbie in advance so my apologies for lack of knowledge in certain areas.
The live link is here:
http://www.splashdesignstudios.com/template/template3.html
You can use the navbar bootstrap and the collapse plugin.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" 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>
<a class="navbar-brand" href="#">
<img alt="Brand" src="img/mocklogo.png" style="height: 100%;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link1 <span class="sr-only">(current)</span></li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
<form class="navbar-form navbar-right">
<span class="fa fa-sign-in"></span>Login
<button type="submit" class="btn btn-custom"><span class="fa fa-search"> </span>Sign Up</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can change the appearance just by changing the bootstrap-css. You can find some themes at the bootswatch.
Check this link to see how it's working. In this example, I'm using the Paper theme.
Hope it's useful!
Specifying fixed width classes to three columns gives less width to last column once your screen size reduces. I would divide the header into two columns (both with display: table-cell and vertical-align: middle) with first one containing the logo and menu and second one containing the buttons. However, to make it act properly under 1200px, you will need to use media queries and adjust the styles for every element accordingle.
I've tried everything to make my 3 logos disappear when the browser becomes mobile friendly. Instead they just float around the screen. I've tried placing my images before, after, and all sorts of places in between of my navbar code:
<header id="header">
<div id="headerbg"></div>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand"></a>
<img class="appstore" src="img/apple.png"></img>
<img class="appstore" src="img/googleplay.png"></img>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul id="nav" class="nav">
<li>home</li>
<li>about</li>
<li>features</li>
<li>signup</li>
<!-- portfolio link not needed <li>portfolio</li> -->
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You can see my site here .com
And if you make the browser small, you will notice the navbar menu icon shows up, and if you click it, my logos for , google store, apple store, are floating everywhere. This is driving me nuts. I've searched bootstrap, stack overflow, google, and other sites to try and figure this out. I am using Twitter Bootstrap obviously for this site. Any help would be much appreciated!
Strange, I inspected your website with Google webtools, and when I simply add class 'hidden-phone' (= the class you need to add to elements to hide them in bootstrap) to the relevant links/ images, they disappear as expected.