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

    Join Date
    Apr 2011
    Posts
    15
    Rep Power
    0

    Trying to fix my drop-down menu pls help!


    Hi this theme had an old dropdown menu that was acting weird in some browsers so I updated it with a plugin and now to need to customize it to look a certain way.

    There are a few stylesheets at work because of the plugin but I am unable to discern why the "Contact Us" text is off-center in the button. I can see that it seems to be too long, but I don't know why it is favoring the right side of the background, instead of being centered in the background. If someone could help me demystify this I would be MUCH obliged.

    I will post a link so that it can be inspected... When I am allowed after 4 more posts!

    Please inspect the elements (too much code to post with all different style sheets at play!).

    Thank you.

    EDIT: here is link: http://drewclifton.com/clients/northern-computer/

    You can also see that the dropdown under 'Services' looks funky; I'm thinking a 'sliding door' solution would be appropriate yes? Thank you.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, DrewDavid.

    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.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    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
    Apr 2011
    Posts
    15
    Rep Power
    0

    Thanks


    Thanks for the welcome Kravvitz,

    It's ok I think I can come up with a couple more questions to make it to 5; I'm almost there now!

    TTYS

    Drew
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    That's a common problem. You simply need to add styles to "ul.dropdown ul li" (why are there several rules for that in more than one stylesheet?) to override styles set for "ul.dropdown li".

    The rule in default.css would look something like this:
    Code:
    ul.dropdown ul li {
    	background: none;
    	color: #000;
    	text-align: left;
    	width: auto;
    	height: auto;
    	line-height: 1.4;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

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

    Join Date
    Apr 2011
    Posts
    15
    Rep Power
    0

    Nice!


    Hi thanks Kravvitz,

    I added your new styes for ul.dropdown ul li element; which then gave me the realization that I could remove the 15px padding I had put around the ul.dropdown li a element in shailan-dropdown.css.

    Now I can add separate formatting to the dropdown items!

    I had another more question that's a bit more advanced. Is there a way that I could have a different background for a menu item that has dropdown sub items in it?

    For instance if there were a menu item with sub items in - ie. 'Services' in my case - the background image would be one with a small white arrow pointing down to indicate that there was more content on mouse hover. I hope that made sense!

    Thank you - you have brought me closer to my goal which seemed bleak yesterday! Bless You!!

    PS the reason for all of the stylesheets is that I had to tear out the old menu and install a plugin which adds a new menu (the menu which was a part of the theme had strange behavior in some browsers...)

    Thanks again
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    I had another more question that's a bit more advanced. Is there a way that I could have a different background for a menu item that has dropdown sub items in it?

    For instance if there were a menu item with sub items in - ie. 'Services' in my case - the background image would be one with a small white arrow pointing down to indicate that there was more content on mouse hover.
    WordPress is automatically adding a "parent" class to the item that has a sub-menu. You can use that to add the arrow icon. You might want to add the icon to the <a> because the <li> already has a background image.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    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
    Apr 2011
    Posts
    15
    Rep Power
    0

    Nice!


    Originally Posted by Kravvitz
    You're welcome.


    WordPress is automatically adding a "parent" class to the item that has a sub-menu. You can use that to add the arrow icon. You might want to add the icon to the <a> because the <li> already has a background image.
    Thanks that is exactly what I was looking to find.

    One more question(!)

    For some reason the background image (menu-button.png) from the main menu items is showing up (and repeating) when I hover over the sub-items!

    I was hoping to keep it simple for now as far as styling the sub-items, and I didn't anticipate running into this...

    Any chance you could send a clue to cancel that from happening? Would it be inheriting this behavior from the main menu style?

    Thanks This truly is CSS help.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Find the "ul.dropdown ul li.hover, ul.dropdown ul li:hover" rule in default.css and change "background-color:transparent" to "background:none".
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

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

    Join Date
    Apr 2011
    Posts
    15
    Rep Power
    0

    Phew


    Again, thank you.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    9
    Rep Power
    0
    Thanks for sharing...

IMN logo majestic logo threadwatch logo seochat tools logo