• 0
Sign in to follow this  
Followers 0

brandnav - dropdown menu size

Question

Posted · Report post

In this post http://www.pagelines.com/forum/discussion/18793/brandnav-menu-positioning#Item_3 I customized the position of menu. Now I have the position I like but I got unexpected and undesidered size of dropdown menu hover. I used firebug to get the correct item but I feel confused by a lot of similar voices related to 'ul.sf-menu li'. I'm not expert at all so any help is much appreciated either to get the right item or what values I have to add to obtain a normal size of drop down boxes. Thanks.

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

I narrowed it down to this section: [code]#brandnav li a, #brandnav .nav-special { display: block; margin-top: 40px; text-decoration: none; }[/code] When I change the margin-top or "hide" it in FireBug the dropdown menu is more condensed. However it moves the entire menu up as well. Let me see if I can figure it out...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes Mackenzie, that's the problem. I lowered the position of menu the way I like. Because of that the dropdown changes the size. How to change the properties of dropdown menu hover in order to keep the normal size?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry to say, but the guy who helped you in the last forum is an idiot. If you want an object to be centered, then don't push it around with margin.. .brandnav-nav { display: inline; vertical-align:middle; text-decoration: none; } also, if you have to work with margins, don't select the single links, but a container like .brandnav-nav, that would push down everything in it. to explain: you already changed the size, cause: #brandnav li a is both the top link, and all the other links in the dropdown as well... thats why u get that margin everywhere...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks [b]gyoery[/b] for your useful explanations. Unfortunately your code seems to not move down the brandnav. I put this code in base theme CSS: --------------------------------------------------- [code]#brandnav.brandnav-nav { float: right; display: inline; vertical-align:middle; text-decoration: none; } #brandnav li a, #brandnav .nav-special { display: block; text-decoration: none; } [/code] ------------------------------------------------------- I tried also this code with no results: ------------------------------------------------------ [code]#brandnav.brandnav-nav { float: right; display: inline; vertical-align:middle; text-decoration: none; } #brandnav li a, #brandnav .nav-special { display: block; text-decoration: none; vertical-align:middle; }[/code] ------------------------------------------------ Did I make something wrong?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Update. I got the way to move down the menu and to keep the dropdown right size. The trick is to change CSS values in [b]plugins/pagelines-sections/brandnav/[/b]. (base theme CSS doesn't work) The working property is 'margin-top' ('vertical-align' seems to not work) Now I have a couple questions: 1)why 'plugins CSS' keep the 'priority' on 'base theme CSS'? 2) will I keep such customization where I would upgrade Pagelines? Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm not certain why the plugins CSS has priority of the base theme CSS, but it shouldn't. Have you tried adding the CSS to the Custom Code > Custom CSS settings? If the section gets an upgrade, then the customization will be lost because you've edited the file within that section's plugin folder.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'll try by Custom Code > Custom CSS and I'll feedback.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can view the order in which ur css's are implemented by viewing the source of your page. just search for .css and you should be able to see in which order they are loaded. This is important, cause in css allways the last value for an object counts. That's why PL is adding your custom code that you write in the custom css as last. This enables you to even "override" the css already set.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the input, @gyoery

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@catarina: why do you keep thanking me? You are not even the person asking the question... And why not use the thanks button, if you want to thank me? Don't get me wrong, I love the appreciation, just saying...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I confirm [b]gyoery[/b] suggestion. If I change the order the CSS base theme will take the priority. Thanks a lot gyoery!

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  
Followers 0