#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    4
    Rep Power
    0

    Superfish sub menu centered


    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'm unable to post a link here as this is my first post here.

    Thanks.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Welcome to DevShed Forums, msathesh.

    What are you trying to center the sub-menu in the relation to all of the first-level items or its parent item?

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    4
    Rep Power
    0
    Thanks Kravvitz.

    I'm trying to center the sub menu. Please see the screenshot here:

    imagebin . org/264897
    Last edited by Kravvitz; July 18th, 2013 at 08:26 PM. Reason: removed unnecessary quote
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    4
    Rep Power
    0

    Superfish Menu Center


    You need to create the separate class for the sub menu that will be the good way.

    Originally Posted by msathesh
    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'm unable to post a link here as this is my first post here.

    Thanks.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    4
    Rep Power
    0
    Thanks. Here is the fiddle, 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.

    Originally Posted by ashishkg17
    You need to create the separate class for the sub menu that will be the good way.
    How should I proceed with separating the class?
    Last edited by Kravvitz; July 18th, 2013 at 08:25 PM. Reason: fixed the URL
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Remove the "position" declaration from the ".sf-navbar li" rule and change the values for "top" and "left" in the ".sf-menu ul" rule as needed.

    Just ignore ashishkg17. What he said made no sense.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    4
    Rep Power
    0
    Thanks a lot Kravvitz,

    I could use the left and top property for the sub-menu but that means I have to have equal number of sub menu items under each one so that it looks centered to it's parent. Okay think about this case, if I have 3 sub-menu items under a menu-item and only 1 sub-menu item in another, it would look weird.

    I wish I could center the sub-menu with margin:0 auto; property but I couldn't. It will look centered no matter how many number of menu items in the sub menu.

    Originally Posted by Kravvitz
    Remove the "position" declaration from the ".sf-navbar li" rule and change the values for "top" and "left" in the ".sf-menu ul" rule as needed.

    Just ignore ashishkg17. What he said made no sense.

IMN logo majestic logo threadwatch logo seochat tools logo