URL TO TEST SITE: enter link description here
I have just attempted to upgrade to bootstrap 4 (alpha 6)
It seems that I am having the opposite issue of most people, in that my .navbar is not collapsed as expected on the initial page load in desktop view. Rather it appears as a horizontal list which pushes the .navbar element to take up about a third of the desktop view. However the .navbar will not uncollapse in mobile view.
Here is the navbar html render:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Marvel Adventures
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>About Us
</li>
<li>Guides
</li>
<li>Surveys
</li>
<li>Monkee
</li>
<li>Characters
</li>
<li>Contact
</li>
<li>Modal
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</div>
</div>
I have done the following so far in an attempt to resolve the issue:
used chrome to inspect the navbar.
checked to make sure all stylesheets are loading.
checked that all javascript are loading
check that jQuery is loading
a. googled for possible solutions.
b. checked stack over flow for possible solutions.
I've just upgraded to bootstrap 4. I have looked on stackOverflow and googled in attempts to find a resolve to my issue, but i have as yet to find one.
Related
first time posting to StackOverflow and new developer, so please go easy on me :-)
I am using bootstrap to make a navbar on my site and am having an issue with the collapse dropdown menu.
Desktop screenshot As this is my first post, images are not allowed to be embedded.
As you can see, I have the logos nicely aligned on the right-hand side of the navbar.
My problems is that when viewed on a mobile screen/ smaller screen, the icons look messy when vertically stacked.Smaller viewing port screenshot
Ideally, I would like the icons to stay on one line in a way that does not jeopardize the overall style of how they look in full desktop mode.
Here is my HTML code, all using Bootstrap, no CSS have been altered:
`
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="600">
<div class="container-fluid" id="navbarText">
<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="#" id="zara"></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" id="nav-options">
<li>About</li>
<li>Tools</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="fa fa-envelope"></span>
</li>
<li><a><span class="fa fa-phone"></span></a>
</li>
<li><span class="fa fa-linkedin"></span>
</li>
<li><span class="fa fa-github"></span></li>
</ul>
</div>
</div>
</div>
</nav>
`
Thank you very much for any help.
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.
In some devices the collapsed navbar items are not being displayed correctly.
The are like this:
and should be like this:
Navbar code:
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>casa do meio
</li>
<li>casa brava
</li>
<li>casa velha
</li>
<li>pool
</li>
<li>prijzen
</li>
<li>over ons
</li>
<li>activiteiten
</li>
<li>gastenboek
</li>
<li>kaartje
</li>
<li>contact
</li>
<li>linken
</li>
</ul>
</div>
</div>
Since I cannot comment on questions yet, I want to share my thoughts this way:
What devices (meaning which screen sizes) are you talking about? Without any CSS it is hard to say why you see this behavior. Can you provide a working sample?
Maybe that helps you:
Changing the collapsed mobile navbar breakpoint
The navbar collapses
into its vertical mobile view when the viewport is narrower than
#grid-float-breakpoint, and expands into its horizontal non-mobile
view when the viewport is at least #grid-float-breakpoint in width.
Adjust this variable in the Less source to control when the navbar
collapses/expands. The default value is 768px (the smallest "small" or
"tablet" screen).
from http://getbootstrap.com/components/#navbar-default
Have you checked out the grid system and its media queries of bootstrap in general? (http://getbootstrap.com/css/#grid-media-queries)
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.