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">
Related
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
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.
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'm trying to replicate the iOS 7 blur effect with CSS 3 to make a blurred menu bar with buttons above it. However, when I blur just the menubar, also the buttons and text in it gets blurred, which isn't what I want.
How the code looks:
<body id="containerid">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Button 1</li>
<li>Button 2</li>
</ul>
</div>
</div>
</div>
</body>
Basically I just want to blur <div class="navbar navbar-static-top"> but not the buttons inside that div. How would one do that?
This one is the best example I have found: http://jsfiddle.net/CSS_Apprentice/WtQjY/415/
This requires: javascript $(document).ready(function(){
This is what I am trying to do with Bootstrap so it actually blurs the background of the image as well but having not as much luck.
I have a problem with Foundation 4 rendering on a small screen.
When on a local server i have the following html code, my custom css is turned of and so is my cutom js. All the needed libraries are loaded correctly as is the foundation library:
Why isnt my topbar showing in a very small browser window?
Below is a html snippet:
<div class="row show-for-touch show-for-portrait show-for-small">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><h4>Dungeon</h4></li>
<li><h4>Pricing information</h4></li>
<li><h4>Contact</h4></li>
</ul>
</section>
</nav>
</div>
You won't be able to see your bar in a small browser if you add this visibility class: show-for-touch, which displays only on a real mobile environment.
If you like to see on a small browser, simply remove this class:
<div class="row show-for-portrait show-for-small">
It works on this plunk.