Can you please tell the CSS for the following?

Hi, can you please tell me the CSS to change the following on this site. Moderated site link on request
the nav menu at the very top of the page. It has a drop down menu, but the drop down menu is very narrow. I would like it to be wider like the main one (but the main one has an option in the theme to change it, but the top menu doesn't) I was thinking to have it 170px wide. If I have the CSS code then I can adjust it once I put the code in to what looks best. But right now its just too narrow.

Also, can I have the CSS code to change the hover color for the links in the footer. The theme gives me the option to change the hover links, but its site-wide and the black link hover color doesn't work as a hover link color in the footer because the footer background is black. I'd like it to be a light grey. I can adjust the color once I put the CSS code in.

I can adjust the code once i have it, but sometimes I have a hard time knowing what the code should be.

Thanks for the help!
Appreciate it!

  • DavidM

    Hiya @Emex Online,

    Great to see ya again! :slight_smile:

    And good to see development's moving nicely along, let's have a look at this one!

    Here's for the top nav bar width:

    #wrapper .header-social .menu .sub-menu {
    width: 200px;
    }

    Once you change that, you'll probably also wanna adjust this too:

    #wrapper .header-social .menu .sub-menu li a {
    width: 180px;
    }

    Yeah, those footer hovers are quite dark, tough to read! This should help:

    .footer-area ul li a:hover {
    color: #fff;
    }

    How's that all work for ya?

    Cheers,
    David

  • Emex Online

    Hi @DavidM

    Thanks! The Top Nav submeu's - that's much better. But I notice when I tollover them, it pops out on the side instead of changing color like the lower menu. What the CSS to make it so that it stops popping out on the site, but only changes color?

    As far as the footer area... this did't work, I put a different color in, but nothing changed?

    .footer-area ul li a:hover {
    color: #fff;
    }

    I like the snazzy effect... very nice :slight_smile: Thank you!

    Also, one more thing, In the center of the page. There I'm using a short code for recent blog roll, but it is pulling in the sharaholic sexybookmarks share links at the bottom. Someone gave me this code to try, but it didn't work. Any help?

    body.page-id-7675 shareaholic-show-on-load { display: none; }

    Thanks!

  • DavidM

    Hiya @Emex Online,

    Hmm, the width I used for the header links seemed to work great, but I see the issue you're referring to. I think the following would fix that:

    #wrapper .header-social .menu .sub-menu li a {
    width: 190px;
    }

    I didn't take a really close look at the footer links, so I assumed the specificity was okay, apparently not though. You could use this to ensure the coloring change:

    footer.footer-area ul li a:hover {
    color: #fff !important;
    }

    With the shareaholic links, you'll see the following in the page's styling:

    .shareaholic-show-on-load {
    display: block !important;
    }

    That'll override further changes because of the !important. A workaround I can see is to instead, hide the content within that, like so:

    body.home .shareaholic-show-on-load .shr-socials {
    display: none !important;
    }

    Perhaps that'll sort it all? :slight_smile:

    -David

  • Emex Online

    Hi @DavidM
    Ok, the menu looks great, thanks :slight_smile:

    The footer situation is half resolved. The first two columns which I think are menu links are following the code. But the 3rd column is following the "snazzy effect" you gave me. I need the 3rd column links to also follow the white hover color?

    The sharaholic is also half resolved, the first code didn't work, btu the second one half worked. The big share buttons are gone, but the social media shares are still there. I'd actually like the tags to be there. That's at least how they have it on the original site, which is what I'm trying to replicate.

    Thank you!

    Let me know. Thanks!

  • Emex Online

    Hi @DavidM

    Also, one more CSS I need.

    See the main menu that is grey... I need it to have lines in between

    This is the original site before I re-themed it.
    Removed site links on request

    This is the site I am trying to make look like that one.
    Removed site links on request

    So on the removed site link on requests site, you see there are lines in between the menu (relationships | family | children | etc...

    I think my client would probably like the lines on the new site as well.

    Can you also tell me the CSS for that please?

    Thank you!

  • DavidM

    Hi @Emex Online,

    Thanks for mentioning those items. The menu items seem to already have the lines between them, did you already get that sorted?

    Something that might help, to remove the slight padding below and above that menu, you could use this:

    div#small-nav {
    padding: 0px !important;
    }

    Whoops, I totally missed that other footer column's links! Sorry there, the following could be used instead of what I mentioned previously:

    footer.footer-area a:hover {
    color: #fff !important;
    }

    Also, rather than the above, this should get those shareaholic links hidden on the home page:

    body.home div.shareaholic-show-on-load,
    body.home div.shareaholic-like-buttonset {
    display: none !important;
    }

    However, shareaholic actually has a setting to disable the options from your index listing. I've attached a screenshot. Have you tried that?

    Thanks!
    David

  • Emex Online

    Hi @ DavidM
    Yes, I've been working on the main menu which is also the sticky menu

    This is the code that I have for it now. The only problem is that if I make it any wider, which I want the border lines of the grey main menu to go to the edge of the slider, but when I do that, then the sticky menu pops down below the background set for it, so I can't seem to have grey main menu go to the proper slider edges. because when I change it then the sticky menu doesn't pops out :slight_frown:

    This is the code I have for it now..
    #nav ul li, #sticky-nav ul li {
    padding-right: 0px;
    border-right: 1px solid #333;
    }

    #navigation li {
    width: 106px;padding:0px !Important;
    text-align: center; float: left; display: inline-block
    }

    Thank you the footer problem is solved :slight_smile:
    Also the sharaholic problem is solved, but I don't have the same screen as you at all, not sure why???

    There's still 3 more things I'm still trying get resolved if you can help...

    First...
    On the original site Moderated site link on request the links in the page body are underlines. I tried this code, but it underlines everything even the menu and footer etc. I don't want the menu links underlined... it looks funny.

    body a {
    text-decoration: underline !important;
    }

    Second....
    (considering this is a responsive theme)
    On the original site Moderated site link on request the page sections are not as wide, so it makes the page and sidebar line up even with the slider. On the one I'm working on Moderated site link on request the sidebar ewxtends out. I can reduce the side bar a little, but if I do it too much the videos look funny. So what I really want is the page width reduced and I don't see it in my Avada theme options.

    Third.... I just noticed this one :slight_frown:
    On the pages with an image at the top such as
    Moderated site link on request
    ORModerated site link on request
    The image of the main person doesn't have the CSS around it. It must have been part of the original theme, cause it looks nice on there. See the same pages the main persons image. It has a nice border that looks nice.
    Moderated site link on request
    OR
    Moderated site link on request
    I don't think its a plugin, cause I don't see one. And I would think that if it was an image optoin then it would still be there?? Someone else told me its a CSS problem. Can you help?

    Thank so much David, I reeeeaaaalllllyyyy appreciate it!!!!

  • Emex Online

    Hi @ DavidM

    These are all fixed... no need! ... thank you so much!!!!

    One question though... do you happen to know....
    I am looking for a plugin that can bring in sidebar widget blog roll posts by Cat ID or even multiple Cat Id.

    most see me to bring in either recent posts, or posts by cat name, but i need it to be by ID. The one I did find didn't work with the theme :slight_frown:

    Please let me know if you happen to know of any.

    Thanks!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.