Very simple question... may sound silly, but I've been struggling to do this for an hour.
How do I LOWER the main navigation links (HOME, ABOUT, GALLERY, etc) on this page:
http://bellairecabinets.com/new/
Thanks in advance!
Firebug addon shows that main navigation menu (#menu-main-nav) has a property margin-top. You can just increase the margin to lower the navigation links.
A very sound long term advice for you will be to grab excellent tools like Firebug, MeasureIt, experiment and learn about CSS properties with them.
You can increase the top margin of the <ul>
margin-top:50px;
You can increase the top padding of the <ul>
padding-top:50px;
If it didn't work, try to increase the top padding of the items inside the <ul>
try this
#menu-main-nav li strong
{ line-height: 35px;
height: 40px !important;
}
Related
I want to make my navigation fill the space of the header vertically. I've tried 100% height with no luck.
If you see here on the development site: http://inspiredworx-labs.com/sites/mannings/ the homepage menu item has a red background that does not stretch/fill the full height of the header.
How can I achieve it, so that all menu items fill the height, even if the height changes?
Thanks
The only way I know to achieve this is a bit tricky but very solid.
Here is a nice and clear explanation :
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
You need to increase padding as below. So, it will look as you need the updates.
#masthead .nav ul li a{
padding: 19px 15px;
}
I'm making a menu. Looks something like thing:
<div>
<ul>
<li><a>menu/<br/>item</a></li>
</ul>
</div>
I want to center the text vertically. I usually go with
ul li { height: 50px; line-height: 50px; }
for example. But obviously this does not work since it is a tag in the menu. I need the text to look like
menu/
item
in the menu. Any ideas how to solve this? Thanks!
You could just set a smaller line height and equal padding top and bottom, like so:
ul li {
padding: 20px 0;
line-height: 14px;
}
This method assumes each item list contains two lines of text for them all to be equal height.
It would look something like this - http://jsfiddle.net/ajcw/fVamh/
Vertical Align is only supported in table cells. You can either adjust your padding to move the text around (will only work for your particular font size and if that changes you will have to re-adjust your padding), or as Dan Andrews mentioned above, you can use display: table-cell, however, this is only supported by the newer browsers, so depending on your audience, it may not be a viable solution.
For table-cell support, see QuirksMode.com
<ul>
<li>Brantford Grandview</li>
<li>Brantford Vintage</li>
<li>Kingston <br/>River Park</li>
<li>Paris</li>
</ul>
It's a pretty basically drop down menu Im building. Right now, I'm just adding a top border to every li giving it a grey line. However, what I want is a 1or 2px gap between the links so the user can see the bg behind. I tried add a div tab in between the li with a height of 1px, but it does not work.
Thanks
A padding inside the li would work.
li{
padding-top:2px;
}
would leave a 2px space inside the li and show the background.
It's hard to tell without seeing the CSS, but I would try fooling around with margin-top or something. It mainly depends on what element the background is being applied to, in your case you would need to apply it to the <li>. Let me know if I need to elaborate.
I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li> it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>
I can't find a solution anywhere.
can someone please check it?
http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.
Thanks in advance.
The problem is in styles.css and has to do with your #main_content h1 title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.
#wrapper #top #right div#primary_navigation
{
position : relative;
z-index: 2;
font-size : 11pt;
margin-top : 72px;
}
And a little further down in the CSS:
#main_content h1
{
position : relative;
z-index: 1;
top : -20px;
font-weight : normal;
}
If you want to visually see the problem, add a background colour to your #main_content h1 and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.
#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}
THis is the problem, try deleting the position:relative, or change it to something else, ie:absolute
My solution to this was to expand the padding around the parent so that the selectable/hover region was larger.
In my case I set something like: .nav a {padding: 20px;}
I had a similar problem and I've found a solution for mine. Now I'm not versed in coding at all, some light Dreamweaver, but that's about it. I was having this problem with a tumblr theme and none of these solutions worked. Only after changing top: 25px; to top: 20px;, the dropdown did work for my site. Hope this helps someone.
I followed the advice of the previous poster but with modifications. I changed all of my relative positioning to absolute for all items on the page (header, menu, and content) and this fixed the menu problem. I had to change for all three items for the menu to stop disappearing on mouseover.
I had a margin set on the <ul> which I removed and put on a div containing the <ul>.
anyway I managed to get a drop down menu from image hover effect, example and example code here dropdown menu from custom button image hover
I hope this helps someone
I had a similar problem: a drop down menu disappeared when the mouse pointer hovered over a part of the drop down menu at which underneath a adsense ad was shown. Putting the ad down in the html page solved the issue. Did not try out other solutions.
I also had this problem. The problem was that there was a space between where the main menu ended and where the dropdown menu began, so while moving the nouse down to the dropdown options, it would pass over an area of the background and the menu would disappear.
The fix was adjusting the top position as shown below (in my case, from 4.0 to 3.75em)
.main-navigation ul ul {
position: absolute;
top: 3.75em;
I had the same problem with the secondary hover navigation going away when i tried to move from the primary to the secondary menu. What seemed to help for me was to move the margin up into the primary menu. I added the following line to my already existing ul li ul { margin-top: -.1em; }
Hey, I appear to have a CSS problem, regarding the spacing of my <div>s on my site.
If you point your browser to www.marioplanet.com you will see an odd space after my Apple-themed navigation bar.
I was wondering if anyone can help me identify why this spacing was added, and how I can eliminate it, as it's undesired.
Also, I believe it has something directly related to the nav bar, because without the nav bar, this is no spacing problem.
Thanks!
It is because of <a></a> present in <li id="gn-support"><a></a></li>
That #globalheader DIV that contains the menu bar has 18px of vertical margin (top and bottom). So naturally what follows is displaced by 18px.
#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}
You might want to remove the gn-ipad, gn-itunes and gn-support <li> elements from your html.
Get rid of the 18px portion of the margin in the globalheader item, then change the width of the globalnav item to 1000px:
globalnav {
margin:0;
padding:0;
width:1000px;
}
Ok the problem has to do with you fixed width on:
#globalheader{
width: 769px; //this is too small and actually not needed.
}
The contained list (#globalnav) has a rendered width of 830px (it has some white space at the end didn't investigate to see where it came from. So if you remove the fixed width from globalheader and add a margin-left of 200px to #globalnav you will center it and get rid of the space.
Additionally if you can see why your list have a bunch of white space to the right of it expanding its size to 830px you can just do a margin-left and margin-right of auto and center the list inside the global header div.
Figured out where the extra space at the end of the ul is comming from list items gn-itunes and gn-support are both rendering with 103px in width. this is comming from the (#globalheader #globalnav LI A css rule) You can override the width in (#globalheader #globalnav li#gn-support A) as well as the (#globalheader #globalnav li#gn-itunes A) css rules and that should fix it as well without resorting to fix above.
If you change the width of globalheader will work.
#globalheader {
height:37px;
margin:auto;
position:relative;
width:515px;
z-index:1;
}
If you want to add more navigation links later you will have to increase the width of globalheader.