I'm building a website with bootstrap 3 and I want to have navbar like on this example http://htmlmystore.justthemevalley.com/bigstart/Version3/index.html
I'm done with static navbar i'ts wrapped with container div and I tried to implement sticky navbar from here: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
but it doesn't work properly it add sticky class but the width of navbar is full only from the right side, the left side still has gutter and when I scroll back up sticky class is not removed and I have sticky nav all the time.
Here is my html code for nav:
<nav id="navbar" class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">1</li>
<li class="nav-item">2</li>
<li class="nav-item">3</li>
<li class="nav-item">4</li>
<li class="nav-item">5</li>
<li class="nav-item">6</li>
<li class="nav-item">7</li>
</ul>
</div>
</nav>
I don't understand the real problem, but it works...
window.onscroll = function() {myFunction()};
Check this Fiddle
Related
How can I get my sticky navigation menu to change background color (i.e. blue to white) after sticking to the top of the screen specifically using the GetUIKit framework?
Here's my code:
<nav class="uk-navbar-container" uk-navbar data-uk-sticky>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-parent"><a href="#works" uk-scroll>works</a></li>
<li class="uk-parent"><a href="#about" uk-scroll>about</a></li>
<li class="uk-parent">resume</li>
</ul>
</div>
</nav>
I read something about being active and inactive, but I don't know what I'm supposed to do. I would prefer to only use the GetUIKit framework in this situation, but if there are easy solutions that are compatible with GetUIKit's code, I'd be willing to try! Thank you!!
As written in docs, you need to provide a class for active state with cls-active: uk-navbar-sticky
For valid HTML5 code, I'm using data-uk instead of uk (which works fine as well)
.tall-placeholder {
height: 1000px;
}
.uk-navbar-sticky {
background-color: powderblue!important;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" />
<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>
<nav class="uk-navbar-container" data-uk-navbar data-uk-sticky="cls-active: uk-navbar-sticky">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-parent"><a href="#works" uk-scroll>works</a></li>
<li class="uk-parent"><a href="#about" uk-scroll>about</a></li>
<li class="uk-parent">resume</li>
</ul>
</div>
</nav>
<section class="tall-placeholder"></section>
You are using prefect, You just don't need to revise code, It's already adding a "uk-active " class when you scroll. So place background color on .uk-active class.
Building out portfolio site using Bootstrap - I'm applying the 'navbar-fixed-top' class in order to get the navbar to stick to the top of the window, such as in this example:
https://getbootstrap.com/examples/navbar-fixed-top/
I'm trying to do so using this code:
<nav class="navbar navbar-fixed-top">
<div class="container">
<div id="navbar" class="navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Projects</li>
<li>Contact Me</li>
</ul>
</div>
</div>
</nav>
However, the navbar is still scrollable when I apply it to my own webpage. You can view the page here:
http://codepen.io/BenWS/pen/gmLEVw
Because you are using the newest version of bootstrap (bootstrap4 beta6).
They change from .navbar-fixed-top to .fixed-top
You have to read document in this link.
I think there is something wrong with the way your are loading in your bootstrap. Make sure you call jquery before you call the bootstrap files. If nothing works you could always add the fixed positioning yourself:
.navbar-fixed-top {
position:fixed !important;
}
working with bootstrap 4 on edge, firefox, chrome fixed-top without dot
<nav class="navbar navbar-expand-lg navbarBGcolor fixed-top">
I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is.
<img id="header" src="/public/images/header.gif" alt="Header"/>
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile</li>
<li>Skills</li>
<li>Projects</li>
</ul>
</div>
</nav>
I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.
Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.
OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.
Setting your image to display: block will correct this issue.
CSS
#header { display:block; }
Or (HTML)
<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>
Your fiddle: http://jsfiddle.net/0tL9up9s/1/
Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.
http://jsfiddle.net/8ppt5zou/1/
<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >
<nav class="grey darken-4">
<div id="navbar" class="nav-wrapper">
<ul id="nav-mobile" class="hide-on-med-and-down">
<li>Profile
</li>
<li>Skills
</li>
<li>Projects
</li>
</ul>
</div>
</nav>
I have a navigation that worked fine when i didn't use any custom bottom border on the nav links, but trying to adding them and still have the functionality as before does my head in. I just want to vertical align the nav items with 50px height and a custom border on the menu links, but keep it functional when in mobile size and de border in mobile view is replaced with a normal underline declaration.
This what i had before adding a custom bottom border and it works:
--> Fiddle before
And this is what happens when adding a custom bottom border when in mobile size the menu items don't vertical align and the background doesn't go down with them:
--> Fiddle after
<header>
<nav>
<div class="mobile-nav">
<div class="nav-toggle"><i class="nav-icon"></i></div>
</div>
<ul class="left-nav">
<li class="home">Pixelation</li>
</ul>
<ul class="right-nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
I'm starting with Bootstrap and have a small problem with the navbar-element. I need to declare a container with the width of 1024px and have to add two navbars. On at the top and the other one below it. Both navbars need a distance from the right div of 0px.
(Stackoverflow doesn't want to let me post pictures, but I think it's much more easier if you can see what I mean: http://www.abload.de/img/asdjraik.png)
As you can see the first navbar is working correctly, but now I need another one below it. Padding from the container under it should be exactly 5px.
My problem is, that the other navbar gains the same padding from the top as the first navbar. I can't get it below the other one. When I define the following classes for this problem another one comes up:
.small-margin {
margin-top: 20px;
}
.big-margin {
margin-top: 110px;
}
My HTML looks like this:
<div class="navbar small-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="navbar big-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>another link 1</li>
<li>another link 2</li>
</ul>
</div>
</div>
</div>
The second navbar appears on the left side of the first navbar and not below it. I tried a lot of CSS-fixes.
Anyone have a idea how to get the 2nd navbar below the first?
Thanks in advance!
I've tried your code and it's works
I also tried adding it into 1024px container
.container{
max-width: 1024px;
}
this is the result
Your css code must be conflicted with the bootstrap. maybe you could try wrapping each navbar with .row. I believe that this solution is surely make all navbar separated.
<div class="row-fluid">
<div class="span12">
... navbar 1 ...
</div>
</div>
<div class="row-fluid">
<div class="span12">
... navbar 2 ...
</div>
</div>