Basically, I have a site that has a sticky header and sidebar nav but when the screen is made smaller, the menu adopts a hamburger button that can expand the collapsible sidebar.
This works as expected except for one thing: The inclusion of the bootstrap CSS cdn.
So If I comment out the CDN for the bootstrap CSS it works correctly, but If I include it and make the screen mobile size, upon hitting the menu button, the menu expands under the main content cards in the main div. If I comment it out, the menu expands on top of the cards as it should.
IN my codepen above, it has the bootstrap CDN to show the error. I have a custom CSS which is also attached there and I have a lot of styling there, I'm just wondering how I can get this fixed and still have the bootstrap CSS for other stying.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<div class="branding">
<div class="menu-button menu-toggle nav">
<i class="material-icons">menu</i>
</div>
<img src=""/>
</div>
<div class="page-details"></div>
<div class="settings">
<div class="menu-button profile">
<i class="material-icons">person</i>
</div>
<div class="menu-button menu-toggle aside">
<i class="material-icons">chat</i>
</div>
</div>
</header>
<div class="app">
<nav>
<div class="title-block">
<img src=""/>
</div>
<ul>
<li>
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">adb</i>
<span>Menu Item with a Long Name</span></a></li>
<li>
<a href="#">
<i class="material-icons">android</i>
<span>Android</span></a></li>
<li>
<a href="#">
<i class="material-icons">attachment</i>
<span>Attachments</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">bookmark</i>
<span>Bookmarks</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">star</i>
<span>Favorites</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i>
<span>Configuration</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">cake</i>
<span>Birthday Party</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">brush</i>
<span>Designer</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">camera</i>
<span>Photos</span>
</a>
</li>
</ul>
</nav>
<!--These are the cards that the menu expands underneath-->
<article>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</article>
</div>
nav.open {z-index: 1 !important};
Z-index will allow you to show the nav on top of other elements and the !important will help you overwrite the bootstrap css
Adding z-index: 9999; to the nav.open worked.
Related
I have a Bulma Navbar and there is too much elements in it which cause it to overflow on the right of the page. Is it possible to make a second line ?
<nav class="is-dark has-background-white">
<div class="navbar-brand is-hidden-desktop">
<div class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<span>Text Here</span>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<a class="navbar-item">...</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">...</div>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
I bought a webpage ( files ) and on some website hosting providers it works, on others it doesn't.
And was wondering if any of you can point me in the right direction on how to change the index.html content to display the correct background image.
The webpage is static, divided into sections, having the below structure for the sidebar which hides/shows different section, with different background image.
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<li>
<a href="#intro" id="tmNavLink1" class="scrolly active" data-bg-img="images/Homepage.png" data-page="#tm-section-1">
<i class="fas fa-home tm-nav-fa-icon"></i>
<span>Introduction</span>
</a>
</li>
<li>
<a href="#products" id="tmNavLink2" class="scrolly" data-bg-img="images/Portofolio.jpg" data-page="#tm-section-2" data-page-type="carousel">
<i class="fas fa-map tm-nav-fa-icon"></i>
<span>Projects</span>
</a>
</li>
<li>
<a href="#company" id="tmNavLink3" class="scrolly" data-bg-img="images/Projects.png" data-page="#tm-section-3">
<i class="fas fa-users tm-nav-fa-icon"></i>
<span>Qualifications</span>
</a>
</li>
<li>
<a href="#contact" id="tmNavLink4" class="scrolly" data-bg-img="images/Contact.jpg" data-page="#tm-section-4">
<i class="fas fa-comments tm-nav-fa-icon"></i>
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
How should I change "data-bg-img="images/Homepage.png" " to actually render background-image ?
I think if it was possible, would have been awesome, to put into the CSS at the top of the page, in the style, all the background images, and somehow to trigger the one for which the section is currently viewed.
The sections are called from this:
<!-- section 1 -->
<section id="tm-section-1" class="tm-section">
<div class="ml-auto">
<div class="myDiv">
<header class="mb-4"><h1 class="tm-text-shadow"><strong> greetings </strong></h1></header>
Continue
<!-- data-nav-link holds the ID of nav item, which means this link should behave the same as that nav item -->
</div>
</div>
</section>
I have searched every thread in the forums, and not be able to resolve my issue. I mostly believe this is because I am new to coding and perhaps don't understand it properly yet.
please help page two below is the one with this issue. The side nav does not work it does not open on the page with the code below. and also it does not close when you click back on the page.
<body>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
index page where there is no issue but I have crossed checked both codes and can't find anything different. The only issue I have is that it remains open unless you click a link and I would like it to close if you click back on the page.
<body>
<!-- Header -->
<header class="main-header">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="#About">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="#About">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
thank you for your help.
UPDATE: sideNav works in codepen.io/Bjorn_Ironside1986/pen/VRbyvL but doesn't work in codepen.io/Bjorn_Ironside1986/pen/OqmOdR
these 2 are required to see codepen working
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I think it's because you never close your header tag.
You need some javascript to initialize the sidenav - in the code below, i just added the options for the side nave to open from the left... Click on the Menu button on the left.
Hope it works for you.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
edge: 'left'
});
});
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
</a>
</div>
<!-- Showcase -->
<div class="showcase container">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<h1>The Digital World</h1>
<h5>Solutions</h5>
</div>
</div>
</div>
</header>
<!-- Section: Solutions About -->
<section class="section section-solutions-about">
<div class="container">
<div class="row">
<div class="col s12 m5">
<h2>What We Do...</h2>
<p>Solutions are ways of solving problems, when you consider world issues today, everything boils down to Langauge, Maths, Technology and Science! If you consider what these represent, in one view that could be taken if we break them down it is merely
code in some form, structed together to create innovation.</p>
</div>
<div class="col s12 m6 offset-m1">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">
Web Devlopment
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Features -->
<section class="section section-features grey lighten-3">
<div class="container center">
<h4>
<span class="deep-purple-text text-darken-1 center">Powerful</span> & Innovative</h4>
<h6 class="grey-text text-darken-2 center">We aim to assist you, and provide quality of service to help you scale your business, capture new clients and retain existing customers with our desings!</h6>
<br>
<br>
<!-- Row 1 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-user"></i> User Friendly Applications
</h5>
<p>As a business the focus is on the client and the user to generate interest or purchase of services and products. We focus on functionality and accessability at the forefront of every desgin to ensure the user maintains interest. We ask you to
provide the information needed to explain your product or service which will allow the user to make an informed choice.</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-database"></i> Security of user and client Data
</h5>
<p>In today's society information is the new form of gold. We can advise you on policys such as EU GDPR and UK data protection laws. Depedning on your wesbites structure we will inform you of any products which may be of benfit to prevent cyber crime.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-chart-line"></i> Data Analytics
</h5>
<p>
Data helps devlope a business it can show growing trends or point out possible issues. With this information a business can takes steps to proctect both themsleves and their client but also it can assist them in devloping growth and expanding into new
sectors. We can advise on tools which can be helpful to your business in relation gathering data from users.</p>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-github"></i> Problem Solving
</h5>
<p>
Programing is not for everyone, that is why their are expereinced devlopers who offer services such a repair or managing sites. We can offer sulutions to problems with your site should the need arise. In some circumstances we may offer to manage your
site for a fee, this can be discussed further dpending your needs.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-plus"></i> Add-ons
</h5>
<p>Our main service is devlopment, we dont offer hosting services or provide domain names. We can put you in touch with some providers, depending on your business services. We dont offer graphic design. We source images which are free of royalty
and are licenced for commecial use to prevent any legal or copyright issues. But sometimes we have to use images from sources such as adobe stock therefore these are not free and will be added to the final invoice. </p>
</div>
<div class="col s12 m4">
<h5>
<i class="fas fa-desktop"></i> Website Design
</h5>
<p> We can offer a range of services in relation to desgin and devlopment. We can do "Landing Page" Mulitiple Page Design, One page design with different sections and E-commerce sites with a database. We can also build custome designs, all our projects
take time depending on complexity and nature of the project.</p>
</div>
</div>
<div class="center">
<h5>
<span class="deep-purple-text text-lighten-1">Have a question? </span> Contact our sales team
</h5>
<p>sales#lueurtech.co.uk</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="page-footer black lighten-1">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Us</h5>
<p class="grey-text text-lighten-4">Our company name "Lueur" is a french word which translates to "Glow" the more common use of the word is "lueur d'espoir" which means "Glimmer of Hope" it is in this meaning that our business looks to offer small business the chance to glow. We
take into consideration that everyone just wants to succeed in life and in business so our mission of course is to make a stable business but the main prespective is to give hope and help people grow!</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li>
<a class="grey-text text-lighten-3 " href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="index.html">About us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright deep-purple darken-1">
<div class="container">
<div> Lueur Tech © 2018</div><i class="fab fa-cc-paypal fa-3x grey-text text-lighten-3"></i>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-3x grey-text text-lighten-3"></i></a>
<p class="grey-text text-lighten-4 right " href="#!"> Terms | Legal | Privacy</p>
</div>
</footer>
I'm just developing a Reproting Tool and due to some reason i have two scroll bars,one which is for Chrome or any other browser and the other is part of the HTML,i couldn't trace anything back to the HTML..
> </head>
<body style="min-height:20px">
<!-- START PAGE CONTAINER -->
<div class="page-container" style="min-height:20px">
<!-- START PAGE SIDEBAR -->
<div class="page-sidebar">
<!-- START X-NAVIGATION -->
<ul class="x-navigation">
<li class="xn-logo">
Reports
</li>
<li class="xn-profile">
<!--<a href="#" class="profile-mini">
<img src="assets/images/users/avatar.jpg" alt="John Doe" />
</a>-->
<div class="profile">
<!--<div class="profile-image">
<img src="assets/images/users/avatar.jpg" alt="John Doe" />
</div>-->
<!--<div class="profile-data">
<div class="profile-data-name">John Doe</div>
<div class="profile-data-title">Web Developer/Designer</div>
</div>-->
<!--<div class="profile-controls">
<span class="fa fa-info"></span>
<span class="fa fa-envelope"></span>
</div>-->
</div>
</li>
<li class="xn-title">Navigation</li>
<li >
<span class="fa fa-cogs fa-spin" title="Configure Reports"></span> <span class="xn-text">Configure Reports</span>
</li>
<li>
<span class="fa fa-cogs fa-spin" title="Configure Dashboard"></span> <span class="xn-text">Configure Dashboard</span>
</li>
<li class="active">
<span class="fa fa-eye" title="View Dashboard"></span> <span class="xn-text">View Dashboard</span>
</li>
</ul>
<!-- END X-NAVIGATION -->
Any Help would be deeply appreciated
what you can do is
to the main div you can apply css like for example you have
<div class ="main">
// rest of your code
</div>
in your main style.css you can put
.main {
width:100%;
height:90%;
overflow:hidden;
}
if this doesn't work you can use
body {
overflow-y:hidden;
}
So i've got a drop-down menu on some elements in the middle of my page. This menu works with purely html and css. Now without any hover the menu items look like this: http://prntscr.com/3es3n8.
With hover however it looks like this: http://prntscr.com/3es3y2.
Now the hover itself works fine and i can style the child elements just fine. My question would be if it was possible for the child element to actually hover over the other items. I know z-index is supposed to do something like this but im not sure how to implement that. I'll try to post as much code as possible but the site is already in ModX.
I'm sorry about all the extra code but the general idea of the situation should be there. http://jsfiddle.net/C8sBp/1/
<div class="row">
<div class="small-12 large-12 columns">
<ul class="small-block-grid-1 large-block-grid-4">
<li>
<div class="icon">
<a href="producten/producten/" title="Kunsmest">
<img src="/i/overview/Fotolia_45201390_XS.jpg" alt="Kunstmest">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/producten/" title="Kunsmest">
Kunsmest
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">test</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Kunsmest
</div>
</li>
<li>
<div class="icon">
<a href="producten/zaden" title="Zaden">
<img src="/i/overview/zadenwb.png" alt="Zaden">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/zaden" title="Zaden">
Zaden
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Zaden
</div>
</li>
<li>
<div class="icon">
<a href="producten/handelsartikelen" title="Handelsartikelen">
<img src="/i/overview/artikelenwb.png" alt="Handelsart">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/handelsartikelen" title="Handelsartikelen">
Handelsartikelen
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Handelsartikelen
</div>
</li>
<li>
<div class="icon">
<a href="producten/veevoer/" title="Veevoer">
<img src="/i/overview/veevoerwb.png" alt="Veevoer">
</a>
</div>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="producten/veevoer/" title="Veevoer">
Veevoer
</a>
<ul>
<li>
<a href="#" title="lorem">
</a><ul><li class="first">pietjes eten</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Veevoer
</div>
</li>
<li>
<div class="text">
<h2>
<nav>
<ul>
<li>
<a href="diensten" title="Diensten">
Diensten
</a>
<ul>
<li>
<a href="#" title="lorem">
</a>
</li>
</ul>
</li>
</ul>
</nav>
</h2>
<p>
</p>
Meer over Diensten
</div>
</li>
</ul>
</div>
</div>
There are a variety of solutions, I've paired back your code a little to make the solution a little clearer, but have a look at this
http://codepen.io/dave_agilepixel/pen/cDtLk
I wouldn't repeat the item, or have the wrapper around the if you can avoid it, if you need the h2 for styling then use css or change the code to something like
<nav>
<ul>
<li><h2>Object</h2></li>
</ul>
</nav>
Also with the icons it might be easier to have those as CSS background images and use padding/background-position to set them in the design.
I hope that helps, in my example I've used position absolute and left to get the sub menu to work, but you could use display:none; or some other methods, if you use a combination of opacity and top then you can also add in css3 transitions to make it look jazzy.