Home Forums Weaver Xtreme Theme How do I adjust the space between main menu items?

Viewing 16 posts - 17 through 32 (of 32 total)
  • Author
    Posts
  • #20098
    DianeClancy
    Participant

    ok – made the sandbox for the site –

    http://dianeclancy.com/sandbox/

    so secondary is on top
    mini is in middle
    primary is on bottom

    I want it where the mini is except with spacing between menu items

    Thank you so much again!!  ~ Diane Clancy

    #20099
    scrambler
    Moderator

    If you are happy with the the mini menu, you can space its item with the rule below (in the Theme Custom CSS Rule box)

    #nav-header-mini a {padding:0 10px;}

    #20100
    DianeClancy
    Participant

    Oh thank you so very much, Scrambler!!!  I will try that in the morning!!  🙂

    You rock!! ~ Diane Clancy

    #20101
    DianeClancy
    Participant

    Oh great, Scrambler!!  It worked!!  Dancing 🙂  Thank you!!!

    And she wants links underlined and I put this
    a:active {
        text-decoration: underline;
    }
    is the Theme Custom CSS Rule box but no links appear – do you mind if I ask you about this too?

    Thank you so very much again!!  ~ Diane Clancy

    #20102
    scrambler
    Moderator

    If she wants the links in the menu underline put the rule below in Main options > Menus > HEader Mini menu > Mini Menu BG CSS+ box

    a {text-decoration:underline;}

    #20103
    DianeClancy
    Participant

    Thank you, Scrambler – that didn’t work – not sure why …

    I had put this there before
    a:hover {
        text-decoration: underline;
    }

    a:active {
        text-decoration: underline;
    }

    and that didn’t work either – I think I am going to let that one go because I think it looks a lot better and plenty clear without them 🙂

    You have been most kind in giving me all this help!!  Thank you so very much!!!!  🙂  They look great now 🙂  ~ Diane Clancy

    #20104
    scrambler
    Moderator

    Ok, but if you do decide to make it work, place the rule I gave you where I told you and post back so we can see why it does not work as it does on my test site

    #20105
    DianeClancy
    Participant

    Thank you, Scrambler – I would like to know how to do it right 🙂 

    Here is the place
    http://dianeclancy.com/sandbox/
    and I *think* I did it right 🙂

    Thank you again for all your help!!!  ~ Diane Clancy

    #20106
    scrambler
    Moderator

    That is because you did not combined the two rules.

    You put in

    a {padding:0 7px;} a:hover {text-decoration: underline;}

    Which generates

    #nav-header-mini a {padding:0 7px;}
    a:hover {
        text-decoration: underline;
    }

    So the selector is missing on the second one.

    This is because the theme add the options selector once in front of everything that is in the box.

    When you have multiple properties with the same selectors, combine them in the same curly bracket. So if you want the underline all the time, use

    a {padding:0 7px;text-decoration: underline;}

    When you need different added selectors (like it is the case here if you only want it on hover) you need to add the selector variable, so what you need to put in the box is

    a {padding:0 7px;} %selector% a:hover {text-decoration: underline;}


    #20107
    DianeClancy
    Participant

    Great Scrambler!!  Thank you for teaching me this 🙂  I had never used CSS in a theme before so didn’t understand those issues 🙂  🙂  You *are* the best!!  🙂

    But hmmmm it didn’t totally work for me …
    This by itself underlines all links great
    a {padding:0 7px;text-decoration: underline;}

    a {padding:0 7px;} %selector% a:active {text-decoration: underline;} – does nothing for underline

    adding #nav-header-mini in doesn’t make a difference

    I need this {    list-style-type: none; text-align:left; float:left;   font-size: 125%;  } to make the sizing right
    it doesn’t work if I put it afterward or in the other places I can find

    jeepers  – I hope I am not bugging you too much – when I take everything out and just put in this
    a:active {
        text-decoration: underline;
    }
    it doesn’t do anything either …

    I am thinking the active link is the page one is currently on – right?

    (I went back to W3Schools and tried to see where I was going wrong to make sure I understood)

    So I amputting this back in to show you
    a {padding:0 7px;} %selector% a:active {text-decoration: underline;}

    I have made dozens of new pages (now all deleted) since I was getting erratic results from refreshing and then started doing this very methodically – I have spent a couple of hours doing this

    It is ok if you are finished with this …. and I would like to know what I am doing wrong if you so desire.

    Thank you so much again Scrambler for your patience and kindness!!!  ~ Diane Clancy

    http://dianeclancy.com/sandbox

    #20108
    scrambler
    Moderator

    You need to explain when you want the underline. I don’t believe a:active {text-decoration: underline;}  would do anything. Your initial post (and my example) mentioned a:hover which is different, so please clarify.

    I don’t see why you want

    list-style-type: none; text-align:left; float:left;  

    As these have no use on that menu. Again if you are trying to solve an issue tell us what the issue is.

    To change the size, add it in the first part

    a {padding:0 7px;font-size: 125%;} %selector% a:hover {text-decoration: underline;}

    If you wanted the menu to be on the left use

    {float:left;} %selector% a {padding:0 7px;font-size: 125%;} %selector% a:hover {text-decoration: underline;}

    So focus on telling us what you want to change from what is there

    #20109
    DianeClancy
    Participant

    Oh good – {float:left;} %selector% a {padding:0 7px;font-size: 125%;} %selector% a:hover {text-decoration: underline;}
    got me back to where I needed to be with the menu with the look … sorry to be so silly about not being clear, Scrambler!!!!

    I didn’t realize all those things could go together!!

    What she wants is an underline of the link for the page that is current … I can see I sent us on a wild goose chase – again I so appreciate your patience!!  Editing a theme so deeply in this way is new to me – it was years before I used widgets when they came out – I am behind

    Is *that* any clearer?  Thank you so much again!!!  🙂  🙂  ~ Diane Clancy

    #20110
    scrambler
    Moderator

    To style the current page you would need a rule

    #nav-header-mini .current-menu-item a {text-decoration:underline;}

    So you can add it to the current CSS+ box with

    {float:left;} %selector% a {padding:0 7px;font-size: 125%;} %selector% .current-menu-item a {text-decoration: underline;}

    This rule in the CSS+ box would be the same as the rules below in Main Options > FOnts & Custom > Custom CSS Rule box


    #nav-header-mini {float:left;} 

    #nav-header-mini a {padding:0 7px;font-size: 125%;} 

    #nav-header-mini .current-menu-item a {text-decoration: underline;}

    #20111
    DianeClancy
    Participant

    Perfect Scrambler!!  oh my goodness!!  I put it both places and now it works perfectly!!  I know you have helped me a ton and I am so thankful!!

    You are most generous!!!  🙂  🙂  🙂  Whew!!!!  ~ Diane Clancy

    #20112
    scrambler
    Moderator

    @DianeClancy

    “I put it both places and now it works perfectly!!  “

    Do NOT put it in both places! Either one or the other. Duplicate rules can only slow things down 🙂

    #20113
    DianeClancy
    Participant

    @Scrambler, I just saw this!!  Thank you – I have now taken it out of the Mini-header menu and left it in the

    Main Options > FOnts & Custom > Custom CSS Rule box

    Thank you once again!

Viewing 16 posts - 17 through 32 (of 32 total)
  • You must be logged in to reply to this topic.