We are working on a website.
However, we have for some unknown reason trouble with the links.
When you are not on the homepage of the site, you can click on logo in the corner and then you should go back to the homepage, the index.php.
This is the code. Do we do something wrong?
</a>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-nav">
<div class="container">
<div class="navbar-header">
<!-- Logo Starts -->
<a class="navbar-brand" href="index.php"><img src="image.png" alt="logo"></a>
<!-- #Logo Ends -->
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right scroll">
<li>Mop Toevoegen</li>
<?php
if($ip == '****') {
echo "<li ><a href='#'>Login</a></li>";
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
Is anchor tag css display: block; ? Check it.
Try
href='./index.php'
Maybe it is not picking up the address of the file correctly.
Related
i'm trying to create a navbar with logo, like this layout: Layout on desktop
and with mobile, like this layout: Layout on mobile
In the first layout, i need that the navbar is center vertically. I have write this snippets of code:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
That's work, except the vertically centered navbar and the logo on mobile go under the navbar, how i can obtain this two layout? Thanks in advance. :)
Your images do not appear making the question unclear on what you're trying to achieve. From what I understand is that you run out of space on mobile causing the elements to stack. Try adding a resizing attribute to the logo to make it a compatible size for mobile. Please revise your question though.
You can try align="center":
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
And please tell me if it works.
im building a "one page" website with two different navbars, one for desktop and the other for small screen sizes. The links in both navbars are same, just the appearance is different. My problem is that i havent find a way to scrollspy both of them, i tried this way but it didnt work:
<body data-spy="scroll" data-target=".navbar, .mobinavi" data-offset="0">
Heres the HTML:
<!-- NAVIGOINTI -->
<div class="container hidden-xs">
<div class="row">
<div class="col-sm-12 navilaatikko">
<nav class="navbar navbar-default navbar-static-top paanavi" data-spy="affix" data-offset-top="140">
<div class="container">
<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>
<span class="navbar-brand"></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Sulka</li>
<li>Tapahtumat</li>
<li>Galleria</li>
<li>Yhteystiedot & Palaute</li>
<li>Henkilökunta</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="visible-xs mobinavi" data-spy="affix" data-offset-top="140">
Sulka
Tapahtumat
Galleria
Yhteystiedot & Palaute
Henkilökunta
</div>
<!-- /NAVIGOINTI -->
Any help? Thanks.
I'm working my way through Microsoft's Intro to Bootstrap course (DEV203x) on edx. I came across this piece of info on there:
To add normal links that are not to be considered as part of the navbar, add the navbar-link class to the a element. The anchor must be contained inside of a navbar-text container.
<div class="navbar-text">
<a class="navbar-link" href="URL here">
Follow us!
</a>
</div>
Normal links are supposedly added like this:
<ul><li>
<a href="URL here">
A normal link!
</a>
</li></ul>
There doesn't seem much difference in how these links appear on page. Only the styling for navbar-text is applied to navbar-link because it's enclosed in that tag.
Am I missing something here?
Just to be safe, normal links are added with <ul class="nav navbar-nav">, not just a ul (which I'm pretty sure you know allready).
For folks using standard links that are not within the regular navbar
navigation component, use the .navbar-link class to add the proper
colors for the default and inverse navbar options.
The differences may be subtle but they're important to know as they can be very useful. links that are not within the regular navigation is where this comes into play as you can use these classes to add text or links to your navbar that does not fall withing the standard ul + li structure.
In the examples you provide, there are differences (if even very small). There probably wouldn't be a need for this (see Example 3):
<div class="navbar-text">
<a class="navbar-link" href="URL here">
Follow us!
</a>
</div>
as Bootstrap takes care of HREFs inside a li class as far as positioning and styling for it's navigation components so this wouldn't make sense and actually does break if you reduce your browser and open the collapsed navbar you'll see the link out of place in Example 3. You'll also see that if you hover over that first link, it will be underlined. This is not the case for a default navigation link.
As examples: If you need some text/link(s) to remain exposed when your navbar collapses for mobile, use these tags inside your navbar-header and they'll be positioned/styled appropriately so you won't (necessarily) have to write the CSS yourself. As well as inside the navbar-collapse panel but outside of the ul class.
See 3 examples in the following Snippet at Full Page.
1) Using these classes appropriately.
2) Same example structure as the First but without these classes applied.
3) What I believe your example illustrates.
<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" />
<h3 class="alert alert-success">Example 1: Using Bootstrap classes</h3>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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" href="#">Brand</a>
<p class="navbar-text navbar-left">This is navbar-text and this is a navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-1">
<p class="navbar-text">This is navbar-text and this is a navbar-link
</p>
<ul class="nav navbar-nav">
<li class="active">Link
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-info">Example 2: Not using Bootstrap classes</h3>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-2" 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" href="#">Brand</a>
<p class="not-navbar-text">This is NOT navbar-text and this is NOT navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-2">
<p class="not-navbar-text">This is NOT navbar-text and this is NOT navbar-link
</p>
<ul class="nav navbar-nav">
<li class="active">Link
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-warning">Example 3: You example</h3>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-3" 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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-3">
<ul class="nav navbar-nav">
<li>
<div class="navbar-text">Follow us!
</div>
</li>
<li>Follow us!
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-success">Example 4: Navbar-Link</h3>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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" href="#">Brand</a>
<p class="navbar-text"> Normal Link Navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-1">
<ul class="nav navbar-nav">
<li>Normal Link
</li>
<li>Navbar-link
</li>
</ul>
</div>
</div>
</nav>
The first example is using the bootstrap structure for css/styling, while the second example is bare bones html. Bootstrap may not be applying anything in this case due to your own css/stylesheets overriding them, with out more information it is difficult to tell.
You will also want to confirm that you have bootstrap properly setup, as those should look different as per Bootstraps look. See here for an example of a navbar-link; http://getbootstrap.com/components/#navbar-links.
I am trying to push the navbar line (and obviously the content as well) down according to logo height. Here is my HTML code:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
</div>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
What I want:
What I get:
Note: Custom css classes have not much to do with the positioning.
You may try something like this:
HTML:
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
CSS:
a.navbar-brand { /*or add another class instead of changing this*/
display:block;
margin:50px 0 10px 0; /* Adjust the margin : top right bottom left */
}
Just keep some margins on top and bottom of that <a> tag. Don't depend on other elements for margin of that <a> tag, instead apply cssrule on itself for it's margin.
Or just put in inside another .row:
<div class='row'>
<a class="navbar-brand" href="#"><img src="images/logoSmall.png" alt="Page Logo"> Brand Title</a>
</div>
Close your the <div class="container"> and open a new container with a margin top around the second row of the nav bar.
Bootply example
Updated HTML:
<div class="navbar navbar-default navbar-fixed-top custom-header" role="navigation">
<div class="container">
<div class="navbar-header transparent">
<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>
</div>
<a class="navbar-brand" href="#"><img src="http://placehold.it/50" alt="Page Logo"> Brand Title</a>
</div>
<div class="container new-nav-line">
<div class="row">
<div class="col-lg-12 custom-navbar-line">
<div class="collapse navbar-collapse">
<ul class="nav nav-pills custom-nav-pills">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">Page1</a></li>
<li><a ng-href="#">Page2</a></li>
<li><a ng-href="#">Page3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS:
.new-nav-line{
margin-top:20px;
}
[noob alert] I am using bootstrap 3 alongside with a bought theme. When using on smaller viewport size, the nav button doesn't work. Which part of it am I missing? Thanks a lot!
<header class="page-header">
<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>
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Hello World!</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">That</li>
<li>This</li>
</ul>
</div>
</div>
</div>
</header>
i works on me, maybe you forgot to add the jquery, script
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js