Jump to content
Sign in to follow this  
karmatrinlay

CSS for Primary Navigation

Recommended Posts

karmatrinlay

Hello, Forgive me if I've overlooked the answer, but I haven't found the solution in previous posts yet. I'm using images in the primary nav and am having problems finding the correct CSS attributes to make the changes I need. The images are loaded via an IMG SRC tag in the WP custom menu setup. There are two issues I haven't been a able to resolve: 1.) Spacing. There is about a 10 pixel margin around each image. I need the images to be almost butted up against each other. I'm assuming this is CSS, but when I inspect I see margins and borders set to 0. Regardless of that setting, there is a roughly 10 pixel border around them. 2.) Drop Down Menu: I need to modify the location of the drop-down menu. Margin-top won't work alone because it will break the location of the third level menu. Can you tell me the CSS attributes I need to mod to position the second level menu at the bottom of the image menu? I'm using Pagelines Framework (Dev) current version, not a child theme. You can see it at http://gitc.3dot0.net Thanks

Share this post


Link to post
Share on other sites
Danny
Hi, 1. You will probably want to change this CSS: [code]ul.sf-menu li a {padding: 10px 15px 10px;}[/code] Lower the padding for left and right (15px in the code). 2. I've tried to do this for you, however, I can't seem to pull it off. Instead of margin-top, you may want to try position, absolute and see if this works.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
karmatrinlay
That did it for the spacing. "Margin-top" wasn't in relation to question one. There are two questions and the CSS change you gave me fixed the first issue. Thank you. Any idea on the second question? [quote]2.) Drop Down Menu: I need to modify the location of the drop-down menu. Margin-top won't work alone because it will break the location of the third level menu. Can you tell me the CSS attributes I need to mod to position the second level menu at the bottom of the image menu?[/quote]

Share this post


Link to post
Share on other sites
karmatrinlay
ALSO (in addition to above) Could you please tell me CSS attributes for the padding/margin to the banner and content areas? Thanks!

Share this post


Link to post
Share on other sites
catrina
Where do you want the drop-down menu? Are you trying to move it up or down? CSS for banners area: [code]section#banners {padding: #px; margin: #px;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
karmatrinlay
at the bottom of each image. The top of the first menu item meeting the base of it's image. I can set the positioning if I know the attributes. I haven't had any luck finding the correct attributes with Firebug. Thanks

Share this post


Link to post
Share on other sites
Jenny
I think you need to go about this in a different approach because the way it's set up now, I don't think it will work. The following CSS moves the menu down, but it adds margin to the other sub-menus as well: [code]#page .main_nav ul ul li { margin-top: 105px; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
karmatrinlay
This works for the first drop-down: [code]ul.sf-shadow ul.sub-menu { margin-top:105px; } [/code] But I need to override the inheritance on the third level and I'm not sure how. Any ideas?

Share this post


Link to post
Share on other sites
Danny
Hi Kendall, Can you give this a try please and see if it works. [code]ul.sf-shadow ul.sub-menu ul {margin-top: 0px;}[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
karmatrinlay
no change. I tried 200px to see if it moved but nothing also. It's not hitting that menu

Share this post


Link to post
Share on other sites
Rob
Something tells me this is a z-index issue but I'm not fully proficient in CSS, thus I cannot say for absolute sure. Since I can't hover on the grandchild element to inspect it's CSS, I'm kind of lost. It seems though that it uses the same CSS as the child element and would normally align right next to the top of the child group or item. This is an incredible source for menus http://www.cssplay.co.uk/menus/ and you might find what you're trying to accomplish there. If you View Source on the menu you find closest to your goal, you might find comparable CSS.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
karmatrinlay
This is definitely not z-index [i]Now you can inspect it.[/i] Our Programs > Start a Program > ( Thanks!

Share this post


Link to post
Share on other sites
karmatrinlay
Still need help, which is why I posted: [quote][i]Now you can inspect it[/i]. Our Programs > Start a Program >[/quote]

Share this post


Link to post
Share on other sites
karmatrinlay
sorry.. I had a call and posted before I finished. Anyway, yes please, that's why I posted that I had set it back so you can inspect the third level menu. I haven't found the solution yet but I'm trying some things from that site.

Share this post


Link to post
Share on other sites
karmatrinlay
:-( That's not it unfortunately. It's the second level of drop-down off the main menu. Go to: [quote]Our Programs > Start a Program >[/quote] and the second drop-down (third level of menu total) will appear. when [code]ul.sf-shadow ul.sub-menu { margin-top:105px; [/code] is enabled, the position of the first drop-down is correct, but it also pushes the next level drop-down 105px away from the first. I have to comment this out though so you can inspect the drop-down after Our Programs > Start a Program. That margin adjustment is disabled now so you can inspect it. Any other suggestions? I really appreciate the help.

Share this post


Link to post
Share on other sites
Rob
I've inspected it and honestly, I can't figure out why the grandchild menu items are located where they are. Something must be affecting them other than CSS because in comparison to the menu CSS on my own site, there's really little difference. Nothing which I've tested seems to work. Since the addition of the image to the menu items is a WordPress issue, not theme based, you may need to do one of two things: 1. Hire one of our Pros to help you. http://www.pagelines.com/announcing-pagelines-developer-center/ 2. Post this question with WordPress support. As this level of customization is beyond the further scope of help we can provide in the forum, I regret that I have to make those suggestions. One of our pros might be able to assist you further with this, as they're used to handling customizations, particularly with menus.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
karmatrinlay
There is no customized code. ZERO code modification. Just an popped into the label field of a standard WordPress menu item. This means that what you're telling me is that you don't know what CSS controls the menus in your themes. I know the support staff has been trying to help. We're all having the same problem in that we can't seem to find the correct attributes via firebug. So if none of us can find WHAT code is causing the behavior, the logical option is to find out from the code developer. So back to PageLines. I would really rather simply know what the applicable CSS attributes are. Your platform is a good product. I'm very pleased with the platform and support has been very good. If your own support is stumped about out of the box functionality, what can I do? Please advise

Share this post


Link to post
Share on other sites
Danny
Hi Kendall, Can you give this a try please: [code]ul.sf-shadow ul.sub-menu ul { margin-top:0px;[/code] If this doesn't work, please reply to this post.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
karmatrinlay
That does it! These two adjustments: [code]ul.sf-shadow ul.sub-menu {margin-top:105px;} /* lowers top of first drop-down menu */ ul.sf-shadow ul.sub-menu ul {margin-top:0px;} /* overrides margin-top inheritance on second drop-down menu */[/code] are all that was needed. You'd think this wouldn't have been so hard to identify! Thank you everyone for the help on this.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×