I'm using bootstrap, and it is a one page site. However, I used an external link at the nav menu. And I don't understand why is not working.
if you try to go by the url stright it works
http://www.neevasoft.com/docasnovo/acervo.html
But when I'm at the index.html, it doesn't work.
you can chaeck it at:
http://www.neevasoft.com/docasnovo
HTML
<div class="body-inner">
<!-- Header start -->
<header id="header" class="navbar-fixed-top main-nav" role="banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Logo start -->
<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="#home">
<img class="img-responsive" src="images\logo.png" alt="logo">
</a>
</div><!--/ Logo end -->
<nav class="collapse navbar-collapse clearfix" >
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#home">Home</a></li>
<li><a class="page-scroll" href="#services">A Empresa</a></li>
<li><a class="page-scroll" href="#historia">História</a></li>
<li><a class="page-scroll" href="#about">Participações</a></li>
<li><a class="page-scroll" href="#team">Renovada</a></li>
<li><a class="page-scroll" href="#contact">Contato</a></li>
<li><a class="page-scroll" href="acervo.html">Acervo</a></li>
<!--li><a class="page-scroll" href="#contact">Contact</a></li-->
</ul>
</nav><!--/ Navigation end -->
</div><!--/ Col end -->
</div><!--/ Row end -->
</div><!--/ Container end -->
</header><!--/ Header end -->
It's probably your Javascript code is blocking the execution of normal href attribute. You can do it something like this:
<li><a class="page-scroll" href="acervo.html" onClick="window.location='acervo.html'">Acervo</a></li>
Inline onClick tag prevails over the Javascript click functions you have set in your document.
Related
I would like to show both the logo and the button on my page in mobile version. I currently using bootstrap navbar:
<div class="navbar-header">
<a class="navbar-brand" href="#first" >
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</a>
</div>
<div class="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
With the following code only the logo inside the navbar-header is shown on mobile not the buttons, Home, About etc. I have no problems on desktop.
First: Base on your html you don't have
<nav class="navbar navbar-default">
</nav>
It should be
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#first">
<img src="assets/logotech500px.png" alt="" style="width:20px;height:20px;">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" class="active" href="#first">Home</a>
</li>
<li>
<a class="page-scroll" href="#one">About</a>
</li>
</ul>
</div>
</nav>
Second: Bootstrap hides the navbar-collapse in mobile but you can toggle it using a button..
A fiddle without the button..
A fiddle with the button..
Try to remove the classes navbar-collapse collapse and the id bs-navbar. These classes are related to the bootstraps library and it makes the menu colapse when the viewport detects a given width of the screen (mobile devices). By removing these classes, the buttons will always be displayed, even in mobile devices.
I have a slightly different form of navigation. The structure is like so
<nav class="navbar navbar-fixed-left vertical-center" role="navigation">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li>
<li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li>
<li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li>
<li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li>
</ul>
</nav>
And with the CSS I display the menu vertically down the side of the page. I have set up a JSFiddle to demonstrate.
My question relates to how I can get this to switch to the standard bootstrap mobile menu on mobile devices?
Thanks
Something like this?
Pnkr
<nav id="mainNav" class="navbar navbar-fixed-left vertical-center">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navCollapsed">
<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" id="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#hero"><span>H</span><span>O</span><span>M</span><span>E</span></a></li>
<li><a class="page-scroll" href="#portfolio"><span>W</span><span>O</span><span>R</span><span>K</span></a></li>
<li><a class="page-scroll" href="#about"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a></li>
<li><a class="page-scroll" href="#contact"><span>C</span><span>O</span><span>N</span><span>T</span><span>A</span><span>C</span><span>T</span></a></li>
</ul>
</div>
</div>
</nav>
Added a button for when the menu is collapsed, which will show up when the navbar breakpoint is reached. The list items are then added under this button.
I use media queries to switch up the style and removing the vertical alignment of the navbar.
I am trying to make a fixed bottom navbar that will slide up when it is collapsed. As far as I can tell i have it set up right, but when I click the collapse button nothing happens.
here is my html:
<nav class="navbar navbar-inverse navbar-fixed-bottom " role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll animated infinite pulse" href="#page-top"><img src='assets/images/logo.png'></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="page-scroll" href="#troposphere">TROPOSHPERE</a>
</li>
<li>
<a class="page-scroll" href="#stratosphere">STRATOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#mesosphere">MESOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#thermosphere">THERMOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#exosphere">EXOSPHERE</a>
</li>
</ul>
</div>
</div>
</nav>
I'd love some help if you can see what I've done wrong.
I am trying to make the picture 100% but it wont work.
Code:
html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
css:
.headerimg {
width: 50%;
height: 100px; }
It would be very helpful if anyone can help. I am usually able to do it but for some reason I am unable to do it this time. Thanks again for your help.
Just change CSS to:
.headerimg
{
width: 50%;
height: 100px;
}
img {
width: 100%;
}
It will make Image 100% in width.
look this : http://jsfiddle.net/cadh3vv9/
try the follow code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img style="width=50%" src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
I styled the image to 50% width you also want it to be 100 px height well thats wrong, its something like telling the browser show a pic of a roadkilled dog, you must define what you preffer, width or height because image resize uses one of these values to resize correct
i have a menu that look like google nexus 7 on the top of my page! i have another navigation menu in the middle of page. when i click on google menu it appear under the navigation menu. how can i show it upon of navigation menu?
here is my code:
<body>
<div id="page">
<div id="header">
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="جستجو" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">دانلود</a>
</li>
<li><a class="gn-icon gn-icon-article">اخبار</a></li>
<li><a class="gn-icon gn-icon-pictures">عکس ها</a></li>
<li><a class="gn-icon gn-icon-cog">مدیریت</a></li>
<li><a class="gn-icon gn-icon-help">راهنمای سایت</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li><a class="login-page" href="http://tympanus.net/codrops">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>حساب کاربری</a></li>
<li><a class="login-page" href="http://tympanus.net/Development/HeaderEffects/">
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span><span>تماس با ما</span></a></li>
</ul>
</div><!-- /container -->
</div> <!-- /header -->
<div id="wrapper">
<div class="container" id="main-container">
<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="#">Brand</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">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- /container -->
</div> <!-- /wrapper -->
</div> <!-- /page -->
here is first picture of my problem
and here is the second
it's hard to tell 100% without your CSS but it appears to be a z-index issue. Try bumping up your z-index to a high number:
z-index: 1000000; //some high number