Pure CSS Menu Doesn't Work When Image Laid on Top - html

I have a website made where I want the header to slightly lay on top of my CSS menu. I lose my CSS menu when the image is laid overtop and would like to retain my CSS menu.
I want the CSS menu in the NAVI div to lay underneath the last image in the topLayer div.
Can anyone please explain a solution.
http://jsfiddle.net/hjkopytko/AfWD5/
HTML:
<body>
<div class="wrapper">
<header>
<div class="topLayer">
<a href="https://www.facebook.com/sawascana" target="_blank"><img src="media/images/metalFacebook.png" width="50" height="50"
style="display:block;position:absolute;margin-left:1050px;margin-top:25px;z-index:10" /></a><a href="https://twitter.com/sawascana" target="_blank"><img src="media/images/metal-twitter.png" width="50" height="50"
style="display:block;position:absolute;margin-left:1050px;margin-top:100px; z-index:10"/></a><a href="index.html"><img src="media/images/logoWhiteText.png" width="400" height="103"
style="display:block; position:absolute;margin-left:75px;margin-top:25px;z-index:10;"/></a> <img src="media/images/metalTop.png" width="1200" height="373" style="display:block;auto;z-index:5" />
</div><!-- end of topLayer-->
</header> <!----- end of header-->
<div class="container">
<div class="whiteContainer">
<div id="navi">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<div class="rec">
<ul>
<li class="sa">YOUR SA
<ul>
<li class="sa">Executive Council</li>
<li class="sa">Bylaws</li>
<li class="sa">Minutes</li>
<li class="sa">Mission/Vision</li>
<li class="sa">Reports</li>
<li class="sa">SIAST Board Rep</li>
</ul>
</li>
<li class="campus">CAMPUS LIFE
<ul>
<li class="campus">Blood Clinics</li>
<li class="campus">Campus Policies</li>
<li class="campus">Events</li>
<li class="campus">Fitness Club</li>
<li class="campus">Student Lounge</li>
<li class="campus">Orientation</li>
<li class="campus">Promotions</li>
<li class="campus">Spirit Awards</li>
<li class="campus">S A F E</li>
</ul>
</li>
<li class="service">SERVICES
<ul>
<li class="service">Info</li>
<li class="service">Aboriginal Awareness</li>
<li class="service">AGM</li>
<li class="service">Health & Dental</li>
<li class="service">Advocacy/Rep</li>
<li class="service">Campus Shop</li>
<li class="service">Dean's Interaction</li>
<li class="service">Income Tax Returns</li>
<li class="service">Legal Consultation</li>
</ul>
</li>
<li class="involve">GET INVOLVED
<ul>
<li class="involve">Campus Groups</li>
<li class="involve">Leadership</li>
<li class="involve">Program Rep</li>
<li class="involve">Sub Committees</li>
<li class="involve">Volunteering</li>
</ul>
</li>
<li class="hello">CONTACT
<ul>
<li class="hello">Ad Opportunities</li>
<li class="hello">Contact Form</li>
<li class="hello">Office Info</li>
<li class="hello">Staff</li>
</ul>
</li>
</ul>
</div>
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
</div>
<!-- end of nav -->
<div id="slider" style="top:-125px;"> <!--> <-->
<ul>
<li><img src="media/images/banner1.jpg" /></li>
<li><img src="media/images/banner2.jpg"/></li>
</ul>
</div> <!--end of slider-->
<div id="column">
<p>Left Column</p>
</div>
<div class="column">
<p>right column</p>
</div>
<!--End of white container-->
</div>
<!-- end .container-->
<div class="push"></div>
<!---meant to push content to bottom of page-->
</div>
<footer>
<!---wrapper-->
<img src="media/images/metalBottom.png" width="1200" height="269" style="display:block; margin-left:auto; margin-right:auto ;z-index:10;" /> </footer>
</body>


Check out this question. Click through a DIV to underlying elements
Should fix it for you. Basically add pointer-events:none; to your overlaid image.

Related

How can I add a submenu to the sidenav in Materialize?

How can I add submenu to the following sidenav?
<ul class="sidenav sidenav-fixed" id="nav-mobile" style="width:250px">
<li> Text here</li>
<li>
<div class="divider"></div>
</li>
<li>
<a onclick="load('home')"><i class="material-icons">home</i>Home</a>
</li>
<li><a onclick="load('intro')"><i class="material-icons">apps</i>Content Table</a></li>
</ul>

MaterializeCSS documentation site uses a collapsible inside the sidenav:
https://materializecss.com/collapsible.html
Collapsible is a separate component that also needs initialising:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
Working codepen:
https://codepen.io/doughballs/pen/RwPWVqy
The actual markup taken from the Materialize doc site is:
<!-- Start nested content -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal" tabindex="0"><i class="material-icons">menu</i>Nested</a>
<div class="collapsible-body">
<ul>
<li>Color</li>
<li>Grid</li>
<li>Helpers</li>
<li>Media</li>
<li>Pulse</li>
<li>Sass</li>
<li>Shadow</li>
<li>Table</li>
<li>Transitions</li>
<li>Typography</li>
</ul>
</div>
</li>
</ul>
</li>

You can do something like below with MaterializeCSS
<div id="slide-out" class="sidenav" style="transform: translateX(0%);">
<ul class="collapsible">
<li class="active">
<div class="collapsible-header">
Group1
</div> <div class="collapsible-body" style="display: block;">
<li>Course 1</li>
<li>Course 2</li>
</div>
</li>
<li class="">
<div class="collapsible-header">
केंद्रीय लोकसेवा आयोग
</div>
<div class="collapsible-body" style="">
</div>
</li>
</ul>
</div>

How to remove unwanted line breaks in html/css

Working on a Django templates with a theme bought on themeforest. The problem I'm having is that, whenever I use base template, the header automatically adds line breaks to the top but when using hardcoded template files, it seems fine.the white space at the top is an example of what im talking about I'd be glad if anyone could help me on how to remove this unwanted space.
Here's the code of the header base template:
{% load static %}
<div id="mainMenuBarAnchor"></div>
<header class="white_header">
<nav class="navbar navbar-default bootsnav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="attr-nav">
<div class="upper-column info-box first">
<div class="icons"><i class="icon-telephone114"></i></div>
<ul>
<li><strong>Phone Number</strong></li>
<li>+1 900 234 567 - 68</li>
</ul>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index6.html"><img src="{% static 'images/logo.png' %}" class="logo" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut">
<li class="dropdown active">
Home
<ul class="dropdown-menu">
<li>Home Style 1</li>
<li>Home Style 2</li>
<li>Home Style 3</li>
<li>Home Style 4</li>
<li> Home Style 5</li>
<li> Home Style 6</li>
<li> Home Style 7</li>
<li> Home Style 8</li>
<li> Home Style 9</li>
<li> Home Fullscreen<span>new</span></li>
</ul>
</li>
<li class="dropdown megamenu-fw">
Listing
<ul class="dropdown-menu megamenu-content" role="menu">
<li>
<div class="row">
<div class="col-menu col-md-3">
<h5 class="title">PROPERTIES LIST</h5>
<div class="content">
<ul class="menu-col">
<li>Properties List</li>
<li>Single Property</li>
<li>Search by City</li>
<li>Search by Category</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-9">
<h5 class="title bottom20">PROPERTIES LIST</h5>
<div class="row">
<div id="nav_slider" class="owl-carousel">
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider1.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider2.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider3.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider1.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider2.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider3.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown megamenu-fw">
Properties
<ul class="dropdown-menu megamenu-content bg" role="menu">
<li>
<div class="row">
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY LISTINGS</h5>
<div class="content">
<ul class="menu-col">
<li>List Style 1</li>
<li>List Style 2</li>
<li>List Style 3</li>
<li>List Style 4</li>
<li>List Style 5</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY LISTINGS</h5>
<div class="content">
<ul class="menu-col">
<li>List Style 5</li>
<li>List Style 6</li>
<li>Search by City</li>
<li>Search by Category</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY DETAIL</h5>
<div class="content">
<ul class="menu-col">
<li>Property Detail 1</li>
<li>Property Detail 2</li>
<li>Property Detail 3</li>
<li>Single Property</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">OTHER PAGES</h5>
<div class="content">
<ul class="menu-col">
<li>Favorite Properties</li>
<li>Agent Profile</li>
<li>404 Error</li>
<li>Contact Us</li>
<li>Testimonials</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Features
<ul class="dropdown-menu">
<li class="dropdown">
News
<ul class="dropdown-menu">
<li>news Style1</li>
<li>news Style2<span>new</span></li>
<li>news Style3<span>new</span></li>
</ul>
</li>
<li class="dropdown">
Property Agents
<ul class="dropdown-menu">
<li>Agent Style1</li>
<li>Agent Style2</li>
<li>Agent Style3<span>new</span></li>
<li>Agent Style4<span>new</span></li>
<li>Agent Style5<span>new</span></li>
</ul>
</li>
<li class="dropdown">
Agetn Profile Styles
<ul class="dropdown-menu">
<li>Agent Profile 1</li>
<li>Agent Profile 2</li>
</ul>
</li>
<li class="dropdown">
Testimonials
<ul class="dropdown-menu">
<li>Style 1</li>
<li>Style 2<span>new</span></li>
</ul>
</li>
<li class="dropdown">
FAQ's
<ul class="dropdown-menu">
<li>Style 1</li>
<li>Style 2<span>new</span></li>
</ul>
</li>
<li>Favorite Properties</li>
<li class="dropdown">
404 Error
<ul class="dropdown-menu">
<li>404 Error 1</li>
<li>404 Error 2<span>new</span></li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
<li>Buy Now</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>

Foundation nav bar acting weird

I use foundation 6 to build my website. Only a problem occurs when I shrink the size of my window.
Picture of my website
Does somebody know how to fix this?
An answer is appreciated.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#"><b>Pimg</b>
</a>
</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li> <div class="entypo-home entipo"></div></li>
<li> <div class="entypo-picture entipo"></div></li>
<li> <div class="entypo-upload entipo"></div></li>
<li> <div class="entypo-user entipo"></div></li>
</ul>
<ul class="left">
<li>Log out</li>
<li class="has-form">
<div class="row collapse">
<div class="medium-8 columns">
<input type="text" placeholder="Search...">
</div>
<div class="medium-4 columns">
Search
</div>
</div>
</li>
</ul>
</section>
</nav>

Navigation system goes a little weird when resizing browser

I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>

Change PARENT class when child link is clicked to "active"

Right I have seen the following information on this topic so do understand more about is here is what I have read so far:
Removing/adding link class onclick
Changing an element's ID with jQuery
and I have read the obvious jquery UI page but I can't find the way to add the onclick so that it changes the "parent" element to class="active"
<!--navbar-->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#" >Relution.co.uk</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left hide-for-medium-up">
<li class="has-form">Click Here to login</li>
<li class="has-form">Not a member? Register for free</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="active">Home</li>
<li class="divider"></li>
<li>About</li>
<li class="divider"></li>
<li>Services</li>
<li class="divider"></li>
<li>Portfolio</li>
<li class="divider"></li>
<li>Contact</li>
<li class="divider"></li>
<li class="has-dropdown hide-for-small">
</i>
<ul class="dropdown">
<li><i class="foundicon-search"></i> Search</li>
</ul>
</li>
<li class="has-form hide-for-medium-up">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
Search
</div>
</div>
</form>
</li>
</ul>
</section>
</nav>
<!--/navbar-->
Below is the code that I'm using to target the links for an onlick even when I do this I want the parent li to become acive and all others to not be active
<script>
$(document).ready(function() {
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(){

http://jsfiddle.net/n5CLu/
$('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(e){
e.preventDefault();
$(this).parent().addClass('active').siblings().removeClass('active');
});