Cannot make fixed block visible if height greather than body - html

I have a problem that I can not make navigation block visible if(its fixed)
styles:
<div class="main_nav">
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-2">
<a href="#" style="text-decoration: none;">
<h1 class="navbar-brand company_title" href="#">Tourer</h1>
</a>
</div>
<div class="col-xs-9">
<div class="navigation">
<ul class="nav navbar-nav navbar-right top_nav">
<li><a id="nav_about" href="javascript: void(0);">About</a></li>
<li><a id="nav_how_it_works" href="javascript: void(0);">How it works</a></li>
<li><a id="nav_features" href="javascript: void(0);">Features</a></li>
<li><a id="nav_footer" href="javascript: void(0);">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.main_nav {
width: 100%;
z-index: 1000;
position: fixed;
background: url('../images/gradient.png');
padding-top: 30px;
min-width: 1280px !important;
Screen:
http://i.stack.imgur.com/Zljz4.png
I cannot scroll to see the right part of my nav.
Please help me.


The fixed position is always relative to viewport. Hence, min-width: 1280px !important; automatically assumes that your width:100% will be ignored when the screen is smaller than 1280px. Try remove the min-width declaration.

Related

Can't hide fixed navbar with z-index

I'm currently trying to create an effect - imagine a fullscreen image which is fixed and will be hidden below the content div on scroll (parallax). Additionally I want the navbar to not move on scroll, hence it's fixed. But I want the navbar to also be hidden below the content div as soon as it's being reached on scroll.
Therefore I've tried to use z-index, but without success. Somehow I'm not able to hide the fixed navbar below the content div.
Header:
<div class="container-fluid position-fixed">
<div class="row m-0 w-100">
<div class="col-2 justify-content-center d-flex offset-5">
<a class="align-self-center" routerLink="">
<h1>NØREBRO STUDIOS</h1>
</a>
</div>
<div class="col-5 pl-5">
<ul class="nav justify-content-start">
<li class="nav-item mr-5">
<a class="nav-link" routerLink="cases">Work</a>
</li>
<li class="nav-item mr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.container-fluid {
z-index: 1;
background-color: transparent;
padding: 3em 0em;
}
Content (upper-container is supposed to hide the header on scroll):
<div class="container-fluid px-0">
<app-transparent-header></app-transparent-header>
</div>
<div class="front-image min-vh-100 min-vw-100">
</div>
<div class="container-fluid upper-container">
...
CSS:
.front-image {
background-image: url("/assets/images/savum/savum-front.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.upper-container {
padding: 15em 15em 0em 15em;
background-color: blue;
}
.container-fluid {
z-index: 9999;
}

If I understand correctly, you want the header to be hidden but you want the navigation bar to be fixed the top of the screen when you scroll:
.nav-parent {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
}
Set a parent class over the navigation bar, and assign it those values

Bootstrap navbar - removing space between buttons

I have a problem. I have a navbar with links represented by images like in the image below (please ignore the Home link as of now):
I would like to remove the grey space between each image horizontally. I have tried to set margin: 0% and padding: 0% on all the images and list items, but to no avail. Looking into Bootstraps source code I suspect it has something to do with the navbar-nav and nav classes being flex containers, but what flex property I should give what value to resolve the issue is unclear to me.
Here is the HTML for the navigation bar:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_content">
<i class="glyphicon glyphicon-align-center"></i>
</button>
<a href="#" class="navbar-brand">
Survey webapp
</a>
</div>
<div id="navbar_content" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="navitem">
<a href="#about">
<img class="navimage" src="Routine survey.png" />
</a>
</li>
<li class="navitem">
<a href="#contact">
<img class="navimage" src="Specific survey.png" />
</a>
</li>
<li class="navitem">
<a href="#help">
<img class="navimage" src="Help.png" />
</a>
<a href="#settings">
<img class="navimage" src="Settings.png" />
</a>
</li>
</ul>
</div>
</div>
</nav>
And here is the relevant (?) CSS:
.nav {
padding: 0%;
margin: 0%;
}
.navbar-nav {
padding: 0%;
margin: 0%;
}
.navitem {
padding: 0%;
margin: 0%;
}
Thanks in advance, I really appreciate the help!
Best regards,
Joshua

It looks as if Bootstrap (version 3) applies padding to <a> elements inside .nav:
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
I don't know if Bootstrap has a native method for removing that padding, but you can always override it yourself:
.nav>li>a {
padding: 0;
}

Menu is underneath content of page (z-index)

I am working on a clients website on Shopify and for some reason the dropdown menu seems to go underneath the product display and filter. I have tried changing the z-index but have had no luck.
Would anyone know what the issue might be? Here is a link to the page having trouble: https://livingtextiles.com/collections/test-collection
<header id="header" style="background-color:#fff!important;">
<div class="header-top pbf-header-top">
<div class="container pbf-container">
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="logo">
<img src="https://cdn.shopify.com/s/files/1/1568/4679/files/wholesale-logo.png?16165857088723477752">
</div>
<nav class="menu-top">
<ul>
<li class="level-1 dropdown">
<a class="dropdown-toggle a1 pbf-ws-text" data-toggle="dropdown" title="Living Textile Brands" style="color:#0c3056!important;font-size: 23px;padding-right:20px;">SHOP BY BRANDS</a>
<ul class="menu-level2 dropdown-menu pbf-column">
<div>
<li class="level2"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/living-textile-ws-logo.png?15789627674492600681"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/lolli-living-ws-logo.png?11306798353806545224"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/poppi-living-ws-logo.png?11306798353806545224"></li>
</div></ul>
<li class="level-1 dropdown">
Collections
<ul class="menu-level2 dropdown-menu">
/*** CSS ***/
#header {
display: block;
float: left;
width: 100%;
}

set position:relative and z-index:99 to the #header, this will fix your problem
#header {
position:relative;
z-index:99;
}

Footer Not Sticking To The Bottom Of The Page

My footer is not sticking to the bottom of the page. I have already tried the following:
footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
footer {
height: 50px;
position: absolute;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}
None of these solutions (found on stackoverflow) have worked out for me so far so I have made a codepen with what I have:
http://codepen.io/sredmond/pen/revjdv
If you expand the code pen so that you see more of the result than the code you will see that it stays
NAVBAR
JUMBOTRON
CONTENT
FOOTER
<!--
Random white space
-->
What I want it to do is go like this:
NAVBAR
JUMBOTRON
CONTENT
FOOTER
Thanks!

Put your .row in div inside footer, maybe row class override your position setting.
Not:
<footer class="row"></footer>
But:
<footer><div class="row"></div></footer>
And then:
footer {
position: fixed;
left: 0; bottom: 0; right: 0;
}
EDIT
So you need flexbox (or tables, flexbox is simplier but less backward compatible):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="/">Project</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Terms Of Service</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-md hidden-lg hidden-sm text-center">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="content-wrapper">
<div class="content-body">
<div class="jumbotron">
<h1 class="text-center">Portfolio</h1>
</div>
<div class="row">
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">PeppNation</h4>
<a href="http://www.peppnation.techuhost.com" target="_blank">
<img src="/Assets/Images/Images/Portfolio/PeppNation.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Brock Report - Publications Page</h4>
<a href="http://brockreport.com/publications.aspx" target="_blank">
<img src="/Assets/Images/Images/Portfolio/BrockReport.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Camp BASIC</h4>
<a href="http://campbasicdev.dev2.nsrit.com/" target="_blank">
<img src="/Assets/Images/Images/Portfolio/CampBasic.png" width="300"/>
</a>
</div>
</div>
</div>
<footer class="content-footer">
<div class="row text-center">
<div class="col-xs-12 col-md-2">
<h4 class="bold">TechU</h4>
<p>Terms Of Service</p>
<p>© 2016 - TechU</p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Contact Information</h4>
<p>Phone: <strong>(414) 255-5423</strong></p>
<p>Email: <strong>samjredmond#yahoo.com</strong></p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Business Hours</h4>
<p>Monday - Friday: <strong>9 a.m. - 5 p.m. CST</strong></p>
<p>Saturday & Sunday: <strong>Closed</strong></p>
</div>
<div class="col-xs-12 col-md-4">
<ul class="nav navbar-nav hidden-xs footer-social-button-align">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav hidden-md hidden-lg hidden-sm">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</body>
&CSS
html, body {
height: 100%;
padding-top: 0;
background-color: #cccccc;
}
.body-content {
height: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
height: 100%
}
.content-body {
flex: 1 0 auto;
overflow-y: auto;
overflow-x: hidden;
padding-top: 50px;
}
.content-footer {
flex: 0 0 auto;
}

I tried this many times and it works perfect for me.
https://css-tricks.com/snippets/css/sticky-footer/
Hope it helps :)

The problem is, that your html and your body tag dont expand to the bottom of the screen, if you have no content. To make your html expand to the bottom add this css:
html,
body {
margin:0; /* removes any margin (especially at the bottom) */
padding:0; /* removes any padding (especially at the bottom) */
height:100%; /* will make it expand to the end */
}

Add a full width image above a Bootstrap navbar

I am trying to insert an image above a navbar, but I it is not working for me. Here is my html:
<div class="wrapper" />
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
and my css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Anytime I add a div or any content, it is pushed to the top of the page. I can add padding, but when I start to resize the screen it breaks and leaves a gap in the image and the navbar. Any help would be great.

<div /> means <div> in HTML 5 and not <div></div> as it does in XHTML. Div's are not valid self closing tags.
Ref
Demo
<div class="wrapper"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

The issue is /> at the end of .wrapper, because it is not allowed (depending on your doctype). Remove it and give it </div> like the other divs, I think it's going to work.