I am trying to make a simple responsive webpage and for that i need some way to resolve my issue -
Now when i resize the window and see
Now what i want is that this logo not to fload downwards but, stay there and scroll with the rest of the body.
Here is my html
<ul id="gn-menu" class="gn-menu-main" style="z-index:99">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li><a class="gn-icon gn-icon-download">Home</a></li>
<li><a class="gn-icon gn-icon-cog">Us</a></li>
<li><a class="gn-icon gn-icon-download">MSR Scenes</a></li>
<li><a class="gn-icon gn-icon-cog">Literature</a></li>
<li><a class="gn-icon gn-icon-help">Music</a></li>
<li><a class="gn-icon gn-icon-cog">Food</a></li>
<li><a class="gn-icon gn-icon-download">Gaming</a></li>
<li><a class="gn-icon gn-icon-cog">Sci-Tech</a></li>
<li><a class="gn-icon gn-icon-help">Horoscopes</a></li>
<li><a class="gn-icon gn-icon-cog">Art</a></li>
<li><a class="gn-icon gn-icon-download">Comic</a></li>
<li><a class="gn-icon gn-icon-cog">Sports</a></li>
<li><a class="gn-icon gn-icon-help">Pop Culture</a></li>
<li><a class="gn-icon gn-icon-download">Free Advice</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li style="position:relative"><img src="images/logo_01.jpg" width="230" height="90" style="z-index:-1" class="logo" ></li>
<li><a id="us" >Us</a></li>
<li><a id="home" ><span>Home</span></a></li>
</ul>
and the list styling is as follows -
.gn-menu-main > li {
display: block;
float: right;
height: 100%;
border-right: 1px solid #c6d0da;
text-align: center;
}
.gn-menu-main > li:nth-child(1) {
float: left;
border-right: none;
border-left: 1px solid #c6d0da;
}
.gn-menu-main > li:nth-child(2) {
float: left;
border-right: none;
border-left: 1px solid #c6d0da;
}
You can set the min-width property of the entire menu.
#gn-menu {
min-width: 300px;
}
jsFiddle Demo
i think you should change the logo image size using media query to fit it in the same place in small screen and you may also need to change the font size , padding etc with media query if you want to fit the menu in small screen size
.img{
width:100px;height:100px;
}
#media screen and(max-width:480px)
{
.img{
width:50px;
height:50px;
}
}
this is happening because when you are resizing your browser your img size is getting too large to fit in the same line
Does it need to overhang? If you don't mind keeping it inline, you could do: max-height: 100%; width: auto; which would keep it inside the bounds of the menu bar.
Related
I have found a nested dropdown example for Materialize 0.98 but it's not working for Materialize 1.00. How would I port it over?
Working example with v0.98 -
https://gist.github.com/the0neyouseek/f1a92b9b8f8962a372c23ef415c63144
I tried to follow the upgrade guide but couldn't get it to work.
Dropdown
Removed gutter option
Removed stopPropagation option
Call plugin on .dropdown-content instead of .dropdown-button
Change attribute data-activates to data-target
Rename classes .dropdown-button to .dropdown-trigger
Rename option belowOrigin to coverTrigger
Removed automatic initialization, initialize it manually as shown in documentation
Please replace data-activates attribute with data-target.
<a class='dropdown-button btn' href='#' data-target='dropdown1' data-beloworigin="true">Nested DropDown</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li><a class='dropdown-button' href='#' data-target='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">▸</span></a></li>
<li>two</li>
<li>three</li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li>one</li>
<li><a class='dropdown-button' href="#" data-target="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">▸</span></a></li>
<li>three</li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
Materialize changed this attribute in version 1.0 .
Have a look at Materialize Dropdown Doc.
Try this solution.
.dropdown-content > li {
position: relative;
}
.dropdown-content li .dropdown-content {
position: absolute;
left: 0 !important;
top: 0 !important;
}
https://codepen.io/FOOGLES/pen/LYYdQeK i hope this help you or other people with the same problem.
nested dropdown its not supported in mat v1 so we need to do some tricks, you need to activate the nested dropdowns with hover, so in matv1 you have to use {
hover: true } in the dropdown selector with Jquery,later with some CSS you make the second and third dropdown take position to the right with left:-100%; or left:100%; if you want the dropdown take left position, i comment the three common options in the CSS.
HTML:
<a class='dropdown-trigger btn' href='#' data-target='dropdown1' >Menu</a>
<ul id='dropdown1' class='dropdown-content dropdown-nested'>
<li>uno</li>
<li><a class='dropdown-trigger sub' href='#' data-target='dropdown2' >uno*</a></li>
<li>uno</li>
</ul>
<ul id='dropdown2' class='dropdown-content dropdown-nested'>
<li>dos</li>
<li>dos</li>
<li>dos</li>
<li>dos</li>
<li><a class='dropdown-trigger sub' href="#" data-target="dropdown3" >dos*</a></li>
</ul>
<ul id='dropdown3' class='dropdown-content'>
<li>tres</li>
<li>tres</li>
<li>tres</li>
<li>tres</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.dropdown-nested {
overflow-y: visible;
}
.dropdown-content .dropdown-content {
/* left: 100%;*/ /*drop hacia la izquierda*/
left: -100%; /*drop hacia la derecha*/
/* left: auto;*/ /*drop hacia el centro*/
}
.container {
background: #eee;
padding: 200px 100px;
border-radius: 8px;
}
$('.dropdown-trigger').dropdown();
$('.sub').dropdown(
{
hover:true
}
On mobile here, I have a dropdown menu that comes down with some options in it. I would like these links to change color to grey when one "hovers" on it with the thumb on the phone. I haven't managed though I have tried several options as you can see in the code. This is it:
<div class="total">
<ul class="nav navbar-nav" >
<li>
<div class="id"><a style="width:100px" data-toggle="dropdown" href="#"><img src="grey.png" alt="Friends in class" class="barimage"> <span ></span></a>
<ul class="dropdown-menu">
<div class="dropdown">
<li><p><b>Search your friends</b> </p>
</li>
<li><p class="menupar"><b>My Friends </b></p>
</li>
<li><p class="menupar"><b>My account</b></p>
</li>
<li><p class="menupar"><b>Logout</b></p>
</li>
</div>
</ul>
</div>
</li>
and this is the CSS:
.dropdown {
margin-top:-3px;
width: 200px;
height:220px;
background-color: rgba(36, 96, 70, 1);
font-size:20px;
line-height:50px;
border-radius: 3px;
}
.menunav {
width: 200px;
height:80px;
color:green;
font-size:20px;
line-height:50px;
border:solid black;
border-radius:1px;
}
a:link {color:white;}
a:visited {color:white}
a:hover.menunav {background-color:grey;}
a:active.menunav {background-color:grey;}
a:focus.menunav {background-color:grey;}
a.menunav {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
Not really sure why you'd want a hover effect on a mobile device, but using :focus whenever you use :hover should do the trick.
I am trying to center an image on my webpage. I want it to appear just above my footer. No matter what I have tried so far nothing works
here is my html
<div class="center-block">
<img alt="footer" title="footer" class="image-footer" src="./img/demo.png"/>
</div>
<div class="navbar-fixed-bottom footer"> <ul class="foot-left">
<li><a href="#" class="menu_buttons" >Home</a></li>
<li><a href="#" class="menu_buttons" >About</a></li>
<li><a href="#" class="menu_buttons" >Support</a></li>
</ul>
<ul class="foot-right">
<li><a href="#" class="menu_buttons" >Powered by Demo</a></li>
</ul>
</div>
and the image-footer class is :
.image-footer
{
position:absolute;
top:680px;
}
no result so far. I have tried every possible combination that I know... Please advice....
Basics ?
<div class="text-center">
<img alt="footer" src="./img/demo.png"/>
</div>
.center-block {
width: 100%;
}
image-footer {
width: 30%;
margin: 0 auto;
}
make sure the parent elements also have a width of 100% (e.g. html,body..)
.center-block{
text-align: center;
}
Does it work now?
What is the simplest way to fade my 3 images into grayscale when hovered upon. This is for my footer.
Here is my html code:
<ul class="review-icons">
<li><a href="http://www.tripadvisor.ca/Restaurant_Review-g154943-d708757-Reviews-Balilicious-Vancouver_British_Columbia.html" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-trip-advisor.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
<li><a href="http://www.urbanspoon.com/r/14/181587/restaurant/South-Cambie-Street/Balilicious-Modern-Indonesian-Vancouver" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-urban-spoon.jpg" alt="Urbanspoon" height="26" width="26">
</a>
</li>
<li><a href=http://www.yelp.ca/biz/balilicious-modern-indonesian-vancouver?nb=1" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-yelp.jpg" alt="Trip Advisor" height="26" width="26">
</a>
</li>
</ul>
my CSS so far:
ul.review-icons > li {
display: inline;
list-style: none;
margin: 15px;
top: 5px;
position: relative;
}
what it looks like in fiddle:
http://jsfiddle.net/FLBRG/2/
** extra - is it possible for the grayscale to scroll in from bottom to top
Plz n Thx
One easy way (but depends on your background color being white):
ul.review-icons > li:hover {
opacity: 0.5;
}
I'm making a navigation where the children will be showed in a different box, much like http://www.boffi.com/EN/Collections/bathrooms/b14.aspx . I managed to separate the child using absolute positioning, but can't get the child elements background to have a 100% height. it's a list element, so if I put height: 100% , the bottom two main navigation elements dissapears. Please help! Here's my html:
<ul id="mainmenu">
<li id="liHome" class="active">
Home
</li>
<li id="liServices" class=" ">
Services
<div class="child">
<ul style="" id="SubMenuY2" class="submenu">
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</div>
</li>
<li id="liEnvironment">
Environment
</li>
<li id="liCareer">
Career
</li>
<li id="liContact">
Contact
</li>
</ul>
and the css
body, html{
height:100%;
}
#mainmenu{
background:black;
color: white;
width:130px;
position:relative;
top:0;
height:100%
}
#mainmenu li a {
color:white;
}
ul.submenu{
position:absolute;
background:blue;
width:130px;
}
div.child{
position:relative;
margin-left:130px;
}
Thanks a lot for the help.
I simplified your code a little.. well I actually just removed the div with class="child", as you don't really need it.
Then, all I did was this:
ul.submenu{
position:absolute;
left: 130px; top: 0;
background:blue;
width:130px;
height: 100%;
}
Take a look at the fiddle: http://jsfiddle.net/joplomacedo/rqqju/
Was this what you were looking for?