I just got started with materialize
I have create side bar,which should remain open by default, and when clicked on menu button it should be able to display/hidden.
Jsfiddle : https://jsfiddle.net/karimkhan/5hrpcp1j/16/
Currently issue are:
Page content gets disabled when side bar opens on click on menu button
In menu, title, first line, second line text does not appear
some extra div content appears above copyright footer.
I appreciate if someone can help me to improve this appearance.
html:
<body>
<main>
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Components</li>
<li>Javascript</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
</body>
Let me answer your questions:
1) This is the default behavior of the sidenav plugin.
2) The default color for the nav text is white. Set a nav { color: #000 } rule and it will work
3) You have to remove the padding of your footer footer.page-footer { padding-top: 0px; }
It's all CSS and devtools!
Here is a working jsfiddle
Note: For your last comment, for some reason sometimes, it creates two overlays and as a result removes only one. Check it in your environment for better debugging.
Update: I think the multiple overlays is a bug that haven't been fixed. Take a look a this
Related
I'm trying to hide my logo only on one div and show it on another. In one of my sections, I have a video so I do not need to show my logo. I cant however do it at all. It either just hides forever or just does not want to hide at all.
I have tried both style="" inside the div and jquery. None of which works.
My HTML structure:
<!-- HEADER -->
<header id="header" class="header-left">
<div class="header-inner clearfix">
<!-- LOGO -->
<div id="logo" class="logo-left">
<a href="index.html">
<img id="dark-logo" src="files/uploads/logo_dark.png" srcset="files/uploads/logo_dark.png 1x, files/uploads/logo_dark#2x.png 2x" alt="Logo Dark">
<img id="light-logo" src="files/uploads/logo_light.png" srcset="files/uploads/logo_light#2x.png 1x, files/uploads/logo_light#2x.png 2x" alt="Logo Light">
</a>
</div>
<!-- MAIN NAVIGATION -->
<div id="menu" class="clearfix">
<div class="menu-actions">
<div class="menu-toggle"><span class="hamburger"></span></div>
</div> <!-- END .menu-actions -->
<div id="menu-inner">
<nav id="main-nav">
<ul>
<li>xxx
</li>
<li>xxx
<ul class="sub-menu">
<li>xxx</li>
<li>xxxx</li>
<li>xxx</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<span class="pseudo-close header-close"></span>
</header>
Ok so before I show the source, here is what works:
<style>#logo img{opacity:0;visibility:hidden;}</style>
Pretty standard right? So I tried hiding the logo in this same way into a section and it did not work. Example:
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
I then tried jQuery to hide the logo as a test. This did not work at all. Example:
<script src="files/js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#logo").css({
display: "none",
visibility: "hidden"
});
$("#logo").hide();
</script>
What I was hoping to do is hide the logo in a single div then show it for the rest of the page. I had an idea to do this with jQuery or a section. Anyone have any ideas on how to do this?
style="#logo img{opacity:0;visibility:hidden;}"
This is not a valid HTML style attribute. It's a selector for CSS that should be nested under the HTML's <style> tag.
When setting an element's style attribute, you only need to write the style properties. This is how it should look:
style="opacity:0;visibility:hidden;"
Your jQuery attempt to hide the logo should work when you remove the logo element's style tag. Doing $('#logo').hide(); should work and is enough.
A few notes:
Using opacity:0; with visibility:hidden; doesn't make sense. Use either one of them, both make the element invisible.
You can just write $('#logo').hide();, no need to the whole $("#logo").css({ section.
You can shorthand $(document).ready(function(){ to just $(function() {
Keep in mind using visibility:hidden; keeps the element inline the page, but invisible. If you want to make it disappear completely, use display:none;
You can't write inline style to another element.Inline styles are applicable to the element itself.
This is the right way
<style>#logo img{opacity:0;visibility:hidden;}</style>
This is not possible
<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">
....
</section>
Try
section #logo img{opacity:0;visibility:hidden;}
I am working on designing a page by looking at the image I have. I am stuck on the menu bar design as I am not able to figure out how can I design the menu bar like I have in my image. It should exactly match with what I have in my image.
Here is my jsfiddle and here is my image which I am trying to replicate.
I tried creating horizontal menu bar as shown in that image but somehow my menus are not showing at all. It looks like they are hidden somewhere. Here is my HTML code:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>PROGRAMS</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="dropdown">
<b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>BE EXTRODINARY</i>
</li>
<li><i>RISK & REWARD</i>
</li>
<li><i>BLOG</i>
</li>
<li><i>OUR STORY</i>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="header"> <img class="header-background" src="https://s3.postimg.org/yr4kr8v0j/kaestle-chris-davenport-antarktis-2009-04.png"> <img class="orange-bar" src="https://s23.postimg.org/od4umnehn/orange-bar.png">
<h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
</div>
What is wrong I am doing here? Also I need to make Log in | Sign up using font aswesome (and I have already imported its css in my jsfiddle) and GET COVERED button as well.
The first 2 problems are:
.dropdown {
display: none; /* get rid of this */
}
and you need your img to float: left.
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
The twitter bootstrap docs site, the left nav gets fixed to the top in a mobile layout.
ex: http://twitter.github.com/bootstrap/javascript.html
I want to do the same without using the ...docs.css as is done in the Bootstrap site.
Currently, the issue that I'm facing is that the 'affix nav' stays on top of the content in mobile dimensions as you scroll through the content.
<div class="row">
<div class="span3">
<div data-spy="affix">
<ul class="nav nav-list nav-stacked">
<li> Objective
</li>
<li> Experience
</li>
<li> Skills
</li>
<li> Education
</li>
</ul>
</div>
</div>
<div class="span9">
<section id="objective">
<div class="page-header">
<h1>
Objective: <small> Do good </small>
</h1>
</div>
</section>
<section id="experience">
<div class="page-header">
<h1>
Exprience: <small> I worked at a bit </small>
</h1>
</div>
</section>
<section id="skills">
<div class="page-header">
<h1>
skills: <small> my skillz </small>
</h1>
</div>
</section>
<section id="education">
<div class="page-header">
<h1>
education: <small> I went to school </small>
</h1>
</div>
</section>
</div>
http://jsfiddle.net/gPsWe/1/
I want the 'affix nav' to get fixed to the top in a mobile layout with using the latest bootstrap v2.3.1. How do I go about it? Any suggestions?
Menus for mobile screens aren't always the easiest things to work with.
Using the layout you've started with, here's a simple idea where you remove the affixed behaviour for mobile screens: http://jsfiddle.net/panchroma/ZuELd/ . Doing this returns the menu to normal flow so then the content falls nicely into place underneath.
You might need to fine-tune the menu links, or even change them to a horizontal list for mobile screens, but that's easy enough to do from here.
CSS
#media (max-width: 767px){
.affix{
position:static;
}
}
Good luck!