I've been searching for a dropline menu without JS - but without any luck.
I'm trying to build a menu like the one on vimeo.com, but the most tutorials about making a dropline is using something like this:
.submenu { display:none; }
li.item:hover > .submenu { display:block; }
Insted I would like to use overflow:hidden; to show the submenu.
Something like this: http://jsfiddle.net/tuplet/Jv77L/
In this example I've used jQuery to determine the height of #top from 40px to 80px when you hover a list item. This is actually my main problem because I don't know how to do this without jQuery? How can I make the #top height change when hovering a li?
I don't know if it's possible (or the best way) but let me know if you have an idea :)
Thanks
Delete the javascript, add this to your css:
#top:hover {
height:80px;
}
Related
This is my website. I work with Wordpress and my theme is Sonata (Themeforest).
At some point I made some tweaks to the menu bar height on the CSS code, but now I want to make it smaller again (more proportionate).
Also, I would like to make the logo responsive, so that it fits within the menu bar.
Can somebody help me with the CSS code?
I don't know what part of the code should I modify, but I believe it is this one (correct me if it is not):
/* Header
-------------------------------------------------------------------------------------- */
#wi-header {
width:100%;
height:40px;
position:relative;
background:#fff;
z-index:9999;
transition:height .3s ease-out;
}
#wi-header .container {
position:relative;
}
#wi-logo a {
display:block;
color:#333;
font-size:34px;
font-family:"Oswald", sans-serif;
text-decoration:none;
text-transform:uppercase;
margin:0;
height:auto;
}
#wi-logo img {
max-height:auto;
display:block;
class:img-responsive;
}
.site-description {
color:#999;
font-style:italic;
margin-top:10px;
}
.site-description a {
color:#333;
text-decoration:underline;
}
Thank you in advance for your help!
If you want to tweak your lay-out, I suggest you start learning HTML & CSS. That said, your logo is taking the width of its parent element, i.e. <div class="span4">. So your logo has a width of 100% compared to this div. One solution could be:
#wi-logo img {
width: 50%;
}
which will make your logo the half of the width of its parent. But there are multiple possibilities, depending on what you really want. Again, I suggest you learn the basics. MDN is a great place to start.
Edit:
In most cases, the best thing you can do if you wan't to modify a theme, is to create a child theme. It's never good practice to modify code of an existing theme. When it gets updated, you might lose your changes. Take a look at https://codex.wordpress.org/Child_Themes. The short answer: create a child theme with at least a style.css file in and make your changes there. The style.css should contain at least this comments at the top of it:
/*
Theme Name: Your Child Theme Name
Template: Sonata
*/
Where Template is the parent theme, Sonata in your case. Then, choose your theme as the theme for your site in the backend.
Last but not least: imho, you shouldn't modify the css for the span div. Most likely this is part of a (grid) framework like Foundation or so, which has probably a lay-out of 12 columns, where span-4 means 4/12 of 100% of the width. That's the default structure and isn't meant to be changed. But go on and experiment.
I added style="position:absolute; height:100%;" to an img tag and it got fixed.
I am currently using a theme for wordpress called velocity. I am working internally so my website is not online right now. But you can see the live preview of the theme here.
The problem is that my dropdown menuhided behind this DIV that was automatically created by the theme. I've tried using z-index on both elements, but it did not work.
I didn't change the code of the menu, so right now it must be similar to the live preview on the theme.
The code I assined my DIV (image) was this one:
.title {
background-color:#291d1d;
width:100%;
margin-left:auto;
margin-right:auto;
background-color:#120404;
opacity:0.7;
padding:20px;
border-radius:5px;
opacity:0.7;
padding-top:40px !important;}
Here is a screenshot:
http://i.stack.imgur.com/Gb4We.png
Any ideas on solving this?
you can try this :
position:absolute;
z-index:9999999;
Apply this in your drop down UL class
Thanx
Set z-index to a higher value for your menu.
ex: z-index:999;
The zindex you provided was not big enough probably you need to check what the z-index of the div is then increment the one from menu if not sure which zindex the image div has
use like a really big number like
z-index: 9999999999;
It seems to be a real silly problem, but I'm stuck at it and can't find a way out.
I'm working on a dropdown menu with pure CSS3 and all that I want is the following:
For now, I have this menu:
Note the hovered option cars behavior.
I want that the hovered element looks like the following:
Here is the jsFiddle for the example.
As I said, it could be a stupid question for some of you but I can't realize how to solve it right now.
I tryed width: 100% for a element inside the second <ul> but it doesn't work as I expected.
Any help will be appreciated.
Thanks in advance.
Does this solve the problem: http://jsfiddle.net/David_Knowles/rpF6E/
Added this:
.menu li li {
float:none;
}
.menu li ul li a {
width: auto; /* instead of 100% */
display:block;
}
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here