Jump to content


Photo
- - - - -

brandnav - dropdown menu size


  • Please log in to reply
11 replies to this topic

#1 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 30 March 2012 - 10:23 PM

In this post

Please Login or Register to see this Hidden Content

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.

#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 30 March 2012 - 10:39 PM

I narrowed it down to this section:

Please Login or Register to see this Hidden Content


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...

#3 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 30 March 2012 - 10:49 PM

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?

#4 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 31 March 2012 - 12:21 AM

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...

#5 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 31 March 2012 - 11:39 AM

Thanks gyoery for your useful explanations.
Unfortunately your code seems to not move down the brandnav.
I put this code in base theme CSS:
---------------------------------------------------

Please Login or Register to see this Hidden Content

-------------------------------------------------------

I tried also this code with no results:
------------------------------------------------------

Please Login or Register to see this Hidden Content

------------------------------------------------
Did I make something wrong?

#6 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 31 March 2012 - 01:13 PM

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 plugins/pagelines-sections/brandnav/. (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.

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 31 March 2012 - 03:42 PM

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.

#8 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 31 March 2012 - 05:24 PM

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

#9 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 31 March 2012 - 05:43 PM

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.

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 31 March 2012 - 06:17 PM

Thanks for the input, @gyoery

#11 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 31 March 2012 - 07:40 PM

@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...

#12 oinegue1960

oinegue1960

    Super Member

  • Members
  • 117 posts
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 01 April 2012 - 12:07 AM

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