WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] [closed] dropdown menu color (44 posts)

  1. imcarmel
    Member
    Posted 1 year ago #

    I'm trying out Pinboard, but don't like the black line under the menubar, so I changed it to the lightest color I can get. It won't let me do white. But the problem I'm having is that I can't find how to change the color of the drop downs.. they're still black. With grey text they're impossible to read! what to do?

  2. paul.a.cunn
    Member
    Posted 1 year ago #

    Under Appearance > Theme Options > Design you can change the menu color and the hover color. Under Appearance > Theme Options > Typography you can change the "Navigation links" and "Navigation links hover" text colors. This should do what you want.

    Cheers!

  3. imcarmel
    Member
    Posted 1 year ago #

    Hi, yes, that's how I changed the menu colors and links, but the problem / question I have is about the drop downs.. those don't change with the main menu items. I'm referring to the submenus. SInce I want a dark grey on a light background, the black submenu/dropdown menus being black are a problem and they don't change along with the main ones.

  4. paul.a.cunn
    Member
    Posted 1 year ago #

    Paste the following into your custom css the "color" attribute changes the font color. The "background-color" attribute changes the...well you can figure that one out :).

    #access li li a {
    color: blue;
    background-color: #7FFF00;
    }

    Here is a link to some color names/hex values that may be helpful to you. Both attributes can use either names or hex values.

    http://www.w3schools.com/cssref/css_colornames.asp

    Cheers!

  5. Alexander
    Member
    Posted 1 year ago #

    Hi imcarmel,

    I wrote a step-by-step tutorial how to change the menu including the submenu. Have a look here:

    http://www.mouseclick.com/tutorials-2/adjust-the-navigation-bar/

    Maybe it will be helpful for you.

  6. imcarmel
    Member
    Posted 1 year ago #

    Thanks both of you. But I'm still not communicating my question quite right-- I wish I could send a screenshot.

    Let me try again.

    The main navigation is the right color, the fonts are all right, the hover over the submenu is right, but when I hover over the main menu item and the submenu appears below it it's just a black box, since the background is black and the font is dark grey. The main menu is still white, but the submenus are unreadable until I hover over them.

    Also, if I make these css changes, is that something that will be lost if/when the theme is updated?

    And I found the Portfolio tutorial on Mouseclick too :) that was going to be my next question but it needs it's own subject line ....marie

  7. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    You can post a link to a screenshot.

  8. imcarmel
    Member
    Posted 1 year ago #

  9. paul.a.cunn
    Member
    Posted 1 year ago #

    The custom CSS will not be lost when the theme is updated. It is something that overides the CSS code from the theme so that you can edit the site and make it what you want. You should be able to download the css editor straight from your dash board, when you do it will be under "Appearance" then "Edit CSS." This will allow you to type your own CSS. You can use Alexander's tutorial to help you change the colors/fonts/hover effects as needed. Just paste the code from the tutorial into your CSS sheet and change it as you need to. The code I provided will change what you need but you will need more for the hover effect. All of this is covered it Alexander's tutorials which I have used myself.

    Cheers!

  10. imcarmel
    Member
    Posted 1 year ago #

    OK, i'll give it another try.. I read through it, but didn't see anything about specifically changing the problem I'm having.. I posted a link to a screenshot... but I try it again.
    marie

  11. paul.a.cunn
    Member
    Posted 1 year ago #

    Is this what you want (notice the blue and the green)?

    https://docs.google.com/document/d/1swYazr34DQVUVchB1c2EogiRNzS7jmrpV3u0YzwRam4/edit

  12. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Paul, Snaggy is a great tool for pasting and sharing images. It just may be easier than Google docs.

  13. Alexander
    Member
    Posted 1 year ago #

    imcarmel,

    try to add this to your css:

    #access li li a {
    background: rgb(230, 35, 35);
    }

    which should gives it a nice red. But that you can change easy.

  14. imcarmel
    Member
    Posted 1 year ago #

    Actually, yes :) and it works.
    Now there's a black line between menu items that needs to be a softer grey.

    Thank you SO much. This is really helpful.

    marie

  15. paul.a.cunn
    Member
    Posted 1 year ago #

    This is how to change that black line. The first attribute changes is the color of the line in this case #111 is very black. Then "1px" is the thickness of the border. then "solid" is the style" I would suggest changing just the color to match what you want.

    #access li li a {
    border-bottom: #111 1px solid;
    }

    Cheers!

  16. imcarmel
    Member
    Posted 1 year ago #

    hmm, i changed it to almost white and it's still black. Ideally I'd like the whole box/ line bit to go away and just have the words.

    Thanks again.
    m

  17. imcarmel
    Member
    Posted 1 year ago #

    Ack! I just realized that now that box is white when I hover over the parent page menu item, but turns black when I hover over the submenu. I think I need to sit down with Alexanders tutorial and focus a bit more on this and not just keep running off to this forum for help!

  18. sundas
    Member
    Posted 1 year ago #

    hi, i went through this thread had the same problem, the background of submenu changes but there is a black line between each submenu , is there a way to get rid of that line?

    also is there any way to make the menu have transparency using rgba style.

    I'd really appreciate if anyone has suggestions about this

  19. imcarmel
    Member
    Posted 1 year ago #

    nope still stuck with white boxes for submenus.
    They turn black when I hover over them
    In the main navigation links act funny-- one stays black, 3 that originated as categories turn when, and one turns red when I click on them.

    sigh....

  20. imcarmel
    Member
    Posted 1 year ago #

    So.. here's the CSS based on Alexander's tutorial-- any insights?

    To change the link color:

    #access a {
    color: #666666;
    }

    To change the color when hovering over it:

    #access a:hover {
    color: #c8191b;
    }

    To change the color of the selected topic:

    #access .current-menu-item > a {
    color: #c8191b;
    }

    Change background of main menu link:

    #access a:hover, #access .current_page_item > a, #access li.current-menu-item > a {
    background-color: #f8f8f8;
    }

    To change the background of the sub menu link:

    #access li li a {
    background-color: #f8f8f8;
    }

    To change the background when hovering over the sub menu link:

    #access li li a:hover {
    background: #f8f8f8;
    }

  21. Alexander
    Member
    Posted 1 year ago #

    imcarmel,

    Can you provide a link to your persisting problem?

  22. Daniel Tara
    Member
    Theme Author

    Posted 1 year ago #

    Thank you all for your feedback. In the latest version I have added the option to change the submenu background color. It's just been synced in the repo:

    http://wordpress.org/extend/themes/pinboard

  23. imcarmel
    Member
    Posted 1 year ago #

    Cool!!! Thanks!
    I still have the problem that the current page links in the main navigation behave 3 different ways-- the home page (blog) stays grey, the portfolio ones ( from category pages) turn white and the bio ( normal page) turns red.
    I'd also love to be able to get rid of, or make less noticeable, the boxes around the drop down menus.

    The site is temporarily at http://69.195.124.94/~ingamari/ until I get it finished.

  24. imcarmel
    Member
    Posted 1 year ago #

    The current CSS I've added is :

    To change the link color:

    #access a {
    color: #666666;
    }

    To change the color when hovering over it:

    #access a:hover {
    color: #c8191b;
    }

    To change the color of the selected topic:

    #access .current-menu-item > a {
    color: #c8191b;
    }

    to change line

    #access li li a {
    border: none;
    }

  25. imcarmel
    Member
    Posted 1 year ago #

    i moved the site to it's permanent URL.. which isn't up and running yet .the URL starting with the numbers no longer works. try ingamariecarmel.com in a few days

  26. imcarmel
    Member
    Posted 1 year ago #

    it's up at ingamariecarmel.com.

    The current link issue persists..if I can't fix it, I guess I'll just have to make a darker menu bar :)

    m

  27. propronk
    Member
    Posted 1 year ago #

    Thanks Marie, for the codes above. It solved my problem with the colors of the submenus.

  28. imcarmel
    Member
    Posted 1 year ago #

    Thank Alexander...

    unfortunately my problem persists... the menu items made from categories go white and disappear into my white menu bar.I tried it with a darker bar, but just don't like it.....

  29. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    @imcarmel,

    Can you sum up the issue again? It's just this thread's got a little hectic and I can't make out your issue.

  30. imcarmel
    Member
    Posted 1 year ago #

    Yea it has :)

    the site is at http://ingamariecarmel.com

    I have items in the main nav. bar that come from 2 different sources... some are regular pages and some are from categories. The regular ones behave fine. The 5 from categories look fine until you click them, then they go white (which is the default in the theme). In other words they don't respond to any changes in the navigation link colors.. either in the theme options or in css. I've tried in both the Jetpack version of a css editor and in the theme options version.

    The css I used came from Alexander’s tutorial

    #access li.current-menu-item > a {
    color:#333;
    }

    but the editor asked me to leave out the li, so I tried:

    #access .current-menu-item > a {
    color: #333;
    }

    Neither worked in either editor.

    So I'm at a loss of what to do.

    thanks for any help!
    marie

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic