2

I have centered the Superfish Navbar menu on the page but struggling to find a way to center the first level sub menu on the page.

I couldn't post an image here as I do not have 10 reputations.

Sathesh
  • 41
  • 3
  • Now you can :) please post some css code as well – Maen Jul 17 '13 at 08:35
  • This is hard to answer without code.You can create a [fiddle](http://jsfiddle.net/) which will get your question answered a lot quicker. You can probably effect the menu item by using the :first-child in css. #menuName ul li:first-child{ //code here }; –  Jul 17 '13 at 17:28
  • Thanks. Here is the fiddle, http://jsfiddle.net/msathesh/uPzQW/1/ I'm trying to get the sub menu centered in relation to it's parent. Right now, the sub menu starts from where the main menu starts which is already centered with a specified width & margin:0 auto; property. That's the issue. Any help is greatly appreciated guys. Thanks. – Sathesh Jul 18 '13 at 11:20

1 Answers1

1

Here's a good work-around:

Step 1: Create a Javascript function to displace the sub menu. Something like this:

function DisplaceSubMenu(myDistance){

 document.getElementById("mySubMenu").style.margin-left= -myDistance;

}

Remember: you have to give the un-ordered list an id of "mySubMenu".

Step 2: Call the Javascript function when hovering over "Home" or "Services" since they hold submenus. You make the same call, but pass the "myDistance" attribute as a custom distance (try & error). Here's an example:

<a href="/" class="sf-with-ul" onmouseover="DisplaceSubMenu(30);">Home</a>
Wassim Taher
  • 966
  • 1
  • 9
  • 26
  • Thanks Wassim that's another way, I was hoping that I could use margin:0 auto; on the sub menu but I can't figure out any other way really. – Sathesh Jul 23 '13 at 07:48
  • I would rather prefer doing it using CSS only, but unfortunately this is the only solution in this case. Margin: 0 auto; requires a container div, which is not possible in this case because you have several sub-menus at different positions. If my answer helps I'd appreciate if you mark it as an answer to the question. – Wassim Taher Jul 23 '13 at 10:17
  • 1
    I just added a unique class to the menu items that has sub menus and did it with CSS instead. It's pretty much as same concept as Wassim Taher mentioned here but with just classes and CSS and no JS. Thanks Wassim. – Sathesh Jul 25 '13 at 02:47
  • That's great. I did it with Javascript because I assumed you will have more sub menus; so it's not practical to create unique styles for every menu item and it's easier to simply pass in the margin value in JS. I am glad you got it working. Good luck. – Wassim Taher Jul 25 '13 at 11:38