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.
Related
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 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.
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>