I would like to know how would I dynamically increase the width of the user menu(which is an image), which could take any length of the menu item name. I am using below code.
The menu items in the user menu are shown on a image. Below is the code. Please let me know where should I make the changes. I am trying to use but I am failing to add menu items with large names(they overflow from the menu bar).
user-menu ul li ul {
background: url("naviagtion-dropdwnbackgrd.png") no-repeat scroll left -30px transparent;
border: 0 none;
clear: left;
float: left;
left: -105px;
list-style-image: none;
padding: 15px 11px 0 0;
position: absolute;
top: 17px;
width: 145px;
z-index: 8; }
Related
I'm trying to change the navigation bar so that it opens from left to right instead of up and down.
I want the navigation bar to shift to the right when the menu is open.
How to do this ?
Modify your #navbar-collapse id on your css file as this: I moved your menu at the right adding "right:0" because is positioned as "fixed" and move the border on the left.
#navbar-collapse {
position: fixed;
top: 0px;
right: 0px;
float: left;
z-index: 1031;
width: 220px;
height: 100% !important;
border-left: 1px solid #000000;
border-top: 0px;
background: #ffffff;}
Searched everywhere, tried several techniques, but haven't found a workable answer yet.
Goal: Display a 'pin' background image when hovering over the navigation item.
Issue: Part of pin disappears when it extends past the a:hover tag because the background image is taller than the item
Current css is below. All parent elements are set to overflow: visible
.menu-primary a {
display: block;
padding: 6px 0 6px 0;
text-align: center;
width: 184px;
height: auto;
margin: 0 5px 0 5px;
position: relative;;
overflow: visible;
}
.menu-primary li#menu-item-23 a {
background-color: #dfe6ab;
margin-left: 0;
overflow: visible;
}
.menu-primary li#menu-item-23 a:hover,
.menu-primary li#menu-item-23:hover a {
background: url(images/pin.png) no-repeat left 0px top -7px;
background-color: #dfe6ab;
color: #000000;
overflow: visible;
height: auto;
}
All suggestions welcome. Thank you.
Background's in CSS don't act like Html Elements. If you need the anchor to display it, but the anchor is too small. You'll need to change the size of the anchor tag to the size of your image. Otherwise you can change the background-size of the image inside to fit within the anchor.
Also, you've got a duplicate semi-colon(;) in .menu-primary a, see:
position: relative;;
It has been a few days that I am learning CSS and html. I am trying to build a website and my content container works ( is displayed) exactly how I want it on my 17inch laptop. However when i move it to my desktop in moves to the left and comes down to the bottom.
How do i make an element change in accordance to the resolution of a screen.
/* Entire drop-up menu, show on mouse hover */
#footer_menu li:hover .one_column_layout,
#footer_menu li:hover .two_column_layout,
#footer_menu li:hover .three_column_layout
{
display: block;
position: absolute;
margin: auto;
bottom: 40px;
border: 1px solid #111111;
border-radius: 7px 7px 0px 0px;
background: rgba(0,0,0,0.5);
bottom: 90px;
left: 500px;
width: 500px;
padding-left: 50px;
padding-right: 54px;
font-size: 12px;
left: 400px;
}
There are many things to take account to build a responsive site, but the first is about not fixing width in pixels, but in % and/or use media queries.
I've a problem with my Dropdown menu. When you hover it, it will push the Footer away, and it will create a freaky effect that you can scroll the whole page. (This is only when the dropdown reach the footer)
I have tried lots of things like max-height etc, but it wont work.
Website:
{fixed}
If you hover the 'Zippo' menu item, the freaky things will come.
How can i fix this?
Thanks!
Wouter0100
You can set your dropdown menu position as absolute :
#nav li ul {
margin: 0px;
padding: 0px;
display: none;
position: absolute;
top: 25px;
z-index: 99; /* edited */
}
Change the following class from :
#nav li ul {
margin: 0px;
padding: 0px;
display: none;
}
to
#nav li ul {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 24px;
z-index: 100;
}
Footer drop down because of the height of the menu nav height
to over come this you need to pull menu out of the normal Dom by position it
#menu {position: relative;}
#nav {z-index: 100;position: absolute; }
I would really like to stop the menu items jumping around on this site as the parent item expands to fit its child.
I can get it looking how I want when I add this CSS, forcing the menu items to have fixed widths:
/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}
However, this is clearly not ideal, as the menu needs to be dynamic...
Is there a way to achieve what I want via CSS? I hope so!
I am using the Superfish menu that comes with Theme Hybrid for Wordpress.
Thanks in advance for any help you can offer!
I get your point .. let's see again.
This build uses position: relative/absolute; instead of float: right/left; and it has one flaw mentioned below.
However I haven't test this in old browsers including IE (tested in Chrome & Firefox), but I hope this may provide you some idea to implement it. :)
#primary-menu .menu /* new rule */ {
position: relative;
height: 50px; /* The flaw is you have to fix the menu's height here */
}
#primary-menu ul {
position: absolute;
right: 0;
top: 0;
}
#primary-menu li {
float: left;
list-style: none outside none;
margin-left: 10px;
position: relative;
}
.sub-menu {
background: none repeat scroll 0 0 #244563;
clear: both;
display: none;
font-size: 0.8em;
overflow: visible;
padding: 5px 0 !important;
position: relative;
right: 0;
text-align: right;
top: 30px !important;
width: 700px !important;
}
.sub-menu li {
display: inline !important;
float: none !important;
padding: 10px 0 !important;
width: auto !important;
}