So I'm working with SSI to implement global items like headers, and footers etc. basically for server side scripting since I am using a simple web host.
Now I've checked with the company and SSI is enabled by default. I even ran a few SSI tests which all came back positive to prove my point.
I built a header.html file to be imported into my different pages. The header.html goes a little something like this:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navigation-header">
<button type="button" class="navbar-toggle collapsed" 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="#">Skyline Interactive</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Games <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>State of Gray
</li>
<li>Aldervinia
</li>
<li class="divider"></li>
<li class="dropdown-header">Other</li>
<li>SkyBlog
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am using the SSI include in my html page like below. For example, in home.html (and yes I have a handler that also parses .html and .htm -- I tested these files as well for SSI and they passed):
<!-- #include virtual="/web/includes/header.html" -->
I have this at the very top of my body tag. Am I just missing something? Or are there any ideas where I could have messed something up?
Yeah. I think the issue is that you have to get rid of the space just before the # so that it becomes:
<!--#include virtual="/web/includes/header.html" -->
Related
Need help to resolve the bootstrap dropdown navigation issue. I followed all the rules available but I am missing something. Please help.
The service tab has two drop down li which should open when click on the caret. But the website css is not allowing to do so.
<!-- navbar-header -->
<div class="header-nav">
<nav class="navbar navbar-default">
<div class="navbar-header logo">
<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>
<h1>
<a class="navbar-brand" href="http://www.example.com/">Brand Name</a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>SEO Service</li>
<li>Digital Marketing</li>
</ul>
</li>
<li>Projects</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
<div class="contact-bnr-w3-agile">
<ul>
<!--<li><i class="fa fa-envelope" aria-hidden="true"></i>info#example.com</li>-->
<li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li>
</ul>
</div>
<div class="clearfix"> </div>
</nav>
<div class="clearfix"> </div>
</div>
You have a typo in your code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Here, data-target represents the div that is being targeted for toggling when you click the button. So, it is looking for the div with the ID "bs-example-navbar-collapse-1". This line is fine, though I'd recommend renaming it to something more useful, like "site-nav" or something.
Now, here is where the problem occurs:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
This is the div that you are (correctly) trying to expand/collapse. But you have given it the id "bs-example-navbar-collapse-1 navis", which is not the same as "bs-example-navbar-collapse-1". So, you are clicking the button, but no div is being found with a matching ID.
To solve this, set the ID to "bs-example-navbar-collapse-1" instead (remove "navis"):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Now, all should be right in the world.
Also, far as the jQuery warnings mentioned above, it seems you are loading jQuery 2 already, so you don't need to include 1.12 as well. So make sure you are including the jQuery lib that you want.
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! :)
The button to toggle the nav bar won't function. I've checked through the answers to similar questions and can't see anything wrong with my html. Help much appreciated!
I can see all the li items in my navbar but cannot hide them.
Here's the relevant html:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="home">Simmo Simpson</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav">
<li>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
</ul>
</div>
<div id="#myNavbar" class="collapse navbar-collapse" >
<ul class="nav navbar-nav pull-left">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active"><a href="#contact" >Contact</a></li>
</ul>
</div>
</div>
</nav>
I've also included this at the bottom (and stylesheets etc in the meta section):
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
First off, add type="text/javascript" to the script tags for jquery/javascript includes.
Thirdly, check your server/site/browser configuration in terms of 'cross-site scripting'. I believe this may be your issue here. When you call a script with cross-origin, you are trying to execute the script remotely and for security purposes this tends to be disabled by default for a lot of web sites and/or servers. To get around this, I would recommend downloading the bootstrap CSS/JS files and referencing them from your sites director as apposed to a CDN.
I also see that you had an issue where by you included a '#' in an element id;
<div id="#myNavbar" class="collapse navbar-collapse" > - Upon fixing this the code stopped working, this is because you may not have changed the target ID of the bootstrap toggle button, see; <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">.
In both of these lines the ID's need to match, that being the ID of the navbar element to be toggled, and the button that does the toggling.
Beginner project - I'm working on something with Bootstrap and have mostly finished building my Navbar. When the Navbar goes into collapsed mode I like the dropdown menu a lot and I want to have it this way at all times.
I cant for the life of me figure out what is even making it change to begin with
The left one is how it looks when it is collapsed, and how I wish to have it at all times (notice how it automatically centers the dropdown here as well):
http://imgur.com/a/yFVaE
I found that if I tweaked the CSS so that the page is always in collapsed mode, the dropdown still has the 2 styles and changes where collapsed mode used to kick in
Apologies - beginner here, new to StackOver flow as well, hope this makes sense to someone :) cheers
<nav class="navbar-fixed-top 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" aria-expanded="false">
<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 cornerlogo" href="/">
<img class="logo" alt="Brand" src="/img/Logo1.png">
</a>
<!--<p class="navbar-brand centerme">Current Client Name</p>-->
<ul class="nav navbar-nav navbar-default centerme">
<li class="dropdown">
Current Client Name <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right scrollable-menu">
<li class="newclient">New Client</li>
<li role="separator" class="divider"></li>
<li>client1</li>
<li>client2</li>
<li>client3</li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--******************php if statement here to check if client selected-->
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default">New SABR</button>
<button type="submit" class="btn btn-default">Edit Client</button>
<!--</form>-->
<!--<form class="navbar-form navbar-right">-->
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I dont know how to properly show my css, but not sure its relevant as even if i disable ALL CSS on the page the behavior is the same
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.