Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Weebly help please – nav menu, removing link background

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #176644
    tabby94
    Participant

    Hi there, I’m hoping that someone can help please with some advice on my Weebly site-angelasinger.com. This is my CSS code http://pastebin.com/EP45tDiU
    I have looked online for solutions but the examples say to look for Nav font etc – I can’t find this in my CSS.
    I want to change the font colour of my Navigation menu from blue when clicked on to red; to remove the dark blue background that shows up on links when the cursor hovers over them; to remove the thin blue border that shows up around my linked images (linked to url and email address) when they are clicked on; and to make the dark blue line (in the header) at top of all my pages white. I’m a newby. Thank you, Angela.

    #176646
    MDMueller
    Participant

    I get a 404 from your Website (site-angelasinger.com) and the pastebin doesn’t contain any html…maybe create a CodePen?

    #176647
    tabby94
    Participant

    Hi MD
    HTML below.

    Thank you
    Angela

    #176651
    tabby94
    Participant

    Hi
    I just found the html under the pages – it’s here http://pastebin.com/7Wnx7cZC Hope this is right! Thank you

    Angela

    #176656
    Paulie_D
    Member

    The basic nav styles are actually written in the <head> of HTML pages in a <style> declaration.

    I imagine, not being familiar with Weebly, that there is a setting somewhere that can change this.

    Frankly, from what little I have seen of Weebly, it’s a very poor platform for changing their basic settings.

    #176660
    tabby94
    Participant

    I have found quite a bit online about how to change Weebly settings, however none of the fairly straight forward examples shown look like my CSS so it hasn’t been that helpful.
    One tip on how to remove the thin blue border that shows up around linked images (linked to url and email address) when they are clicked was to paste this:
    img { border: none !important;}
    into the main style sheet. Maybe I have placed it in the wrong place as it made no difference at all.

    #176662
    Paulie_D
    Member

    It looks like you can change the font color with

    
    .wsite-menu-default a {
    font-size: 14px;
    font-weight: bold;
    color: #999999; /* change this */
    }
    

    You might also need to change this

    
    #active a {
    color: #28657c; /* change this */
    }
    
    #176664
    tabby94
    Participant

    Thank you, I’m going to try changing the colour now.

    #176667
    tabby94
    Participant

    The first one changed my menu from grey to red – excellent thank you! The second one changed the clicked on colour fine but not the hover colour which stayed dark blue – so I didn’t change it or I would have had three colours instead of two.
    When I scroll up the entire menu turns the hover blue colour and clicked on tabs are pale near invisible so I’m not sure how to change that.

    #176671
    Paulie_D
    Member

    I would respectfully suggest that you learn how to use the developer tools available to you in all modern browsers. Just right click on something and use Inspect element to see the HTML & CSS applicable.

    The hover color comes from

    
    .wsite-menu-default li:hover a {
    color: #28657c; /* here */
    }

    Your ‘scrolled’ link color comes from

    
    #header.minimal .wsite-logo a, #header.minimal .wsite-menu-default li a {
    color: #28657c; /* here */
    }
    
    #176708
    tabby94
    Participant

    Thanks that’s a great tip and what I’ve come here to find out. Thank you.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.