Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • February 10, 2015 at 4:49 pm #393768
    Netzie

    Hi Lads!
    I want to indicate the page the user has chosen by making the MENU link look like a colored TAB like this:
    CSS of menu tab
    So the current page should show the MENU link like picture (maybe not green :-) ) but just to show you the idea
    Also if the user is on a SUBPAGE – Then the TOP menu should still be COLOR-TAB
    I hope this explains it alright?

    February 11, 2015 at 9:17 am #394155
    Rikard

    Hi Netzie!

    Do you have a link for the page in question?

    Regards,
    Rikard

    February 11, 2015 at 11:35 pm #394760
    Netzie

    Hi Rikard
    Check this site http://mitkorekort.dk/

    February 12, 2015 at 12:02 am #394772
    Josue

    Hi!

    It’s possible but there will be some funkiness if you keep the header shrinking activated (i’d suggest disabling it), add this to Quick CSS:

    .avia-menu-fx{
    display: none;
}
.av-main-nav > li > a {
    line-height: 182px !important;

}
.av-main-nav li.current-menu-item .avia-menu-text {
    padding: 5px 10px;
    background: #97c000;
    border-radius: 2px 2px 0 0;
    color: white;
}

    This will solve the shrinking issue partially:

    .header-scrolled .av-main-nav > li > a {
    line-height: 52.5px !important;
}

    Cheers!
    Josue

    February 12, 2015 at 10:16 am #394875
    Netzie

    Hi
    Thanks
    I change the color to red – But nothing shows up? No change?
    Cheers

    Peter

    February 12, 2015 at 10:51 am #394880
    Josue

    Hey Peter!

    I’m not seeing the code added to the Quick CSS (dynamic stylesheet).

    Regards,
    Josue

    February 12, 2015 at 5:24 pm #395164
    Netzie

    Funny… weird… But it is in there? Maybe that’s why it don’t show??
    But I insure you … I copied it in :)
    And … It’s the only thing in there

    February 12, 2015 at 8:27 pm #395296
    Josue

    Definitely not there, try putting the code in child theme style.css instead.

    Cheers!
    Josue

    February 13, 2015 at 2:48 pm #395752
    Netzie

    Hi Josue,
    I added it in to the child css … Now it shows up :) Thx (Tried to disable all plugins (except Ithemes security). ?? No change?

    However… (See pic)
    A: is ok – Top level menu is colored blue (Current)
    B: is not ok (Looks wiered – Can you show me how to set them “normal” – No blue)
    More menu

    C: Is a new thing – This is menu item set as “Colored Button” (via the menu settings) – Where do I change the color and ONLY on “C” – No other menu buttons?

    Have a nice weekend

    Peter

    February 13, 2015 at 2:53 pm #395761
    Josue

    Hi!

    Make sure the selectors have the greater signs (it indicates direct descendance) placed correctly, to change the colored button color:

    #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    background: red;
}

    Regards,
    Josue

    February 13, 2015 at 5:38 pm #395905
    Netzie

    Hi!
    Ehhh what selectors? I added the code you made? including the ‘>’ Greater signs? Do I need anything else?
    I checked and what I added was exactly as you gave me
    The ButtonColor works like a champ!! THX!!

    February 13, 2015 at 9:15 pm #396006
    Josue

    I missed that here, change:

    .av-main-nav li.current-menu-item .avia-menu-text {
    padding: 5px 10px;
    background: #97c000;
    border-radius: 2px 2px 0 0;
    color: white;
}

    To:

    .av-main-nav > li.current-menu-item > a > .avia-menu-text {
    background: none repeat scroll 0 0 #535063;
    border-radius: 2px 2px 0 0;
    color: white;
    padding: 12px 13px 6px;
}

    Cheers!
    Josue

    February 13, 2015 at 9:41 pm #396019
    Netzie

    Alright… Nice… But the submenu is still colored?
    I am sorry for dragging you around this… so many times. But all I wanted was to color the top current menu
    Not have the color show up on submenus like “B” in the picture above

    Cheers!

    Peter

    February 13, 2015 at 9:56 pm #396026
    Josue

    Remove this from Quick CSS:

    .av-main-nav li.current-menu-item .avia-menu-text {
    background: none repeat scroll 0 0 #535063;
    border-radius: 2px 2px 0 0;
    color: white;
    padding: 12px 13px 6px;
}

    Best regards,
    Josue

    February 14, 2015 at 2:52 am #396082
    Netzie

    Ok… I cleaned the Quick CSS and only using the Child CSS
    Here are the total:
    /* Make menu TABS colored current page link */
    .avia-menu-fx {
    display: none;
    }
    .av-main-nav > li > a {
    line-height: 182px !important;
    }

    .header-scrolled .av-main-nav > li > a {
    line-height: 52.5px !important;
    }

    /* Changing the colored button of top menu */
    #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    background: red;
    }

    It still show submenu colored!
    Can you edit for me? Thx
    Cheers!

    Peter

    • This reply was modified 9 years, 9 months ago by Netzie.
    February 14, 2015 at 3:06 am #396086
    Josue

    The dynamic stylesheet (Quick CSS) still has residual code (look at the bottom):
    http://mitkorekort.dk/wp-content/uploads/dynamic_avia/enfold_child.css

    Try removing it via FTP and generating it again from the Theme Options.

    Regards,
    Josue

    February 14, 2015 at 4:19 pm #396158
    Netzie

    Hi Josue
    Super cool… You can see stuff!!? Wow
    That helped – It works! No more residue – THX!

    February 14, 2015 at 9:40 pm #396213
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.