Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #10949

    Hi, i would like to remove the built in line above the main menu and the boxed grey lines around the main menu buttons so that is is just clean buttons with no borders or lines….also how can i space them out across the top. Website address: Thanks in advance!


    Hi ToGoWest,

    You can add the following to your Quick CSS or custom.css stylesheet located in the css folder of the theme files.

    #wrap_all {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;

    .main_menu {
    border: none;

    .main_menu .avia_mega > li > a {
    border: none;

    As for the spacing, you will need to play with the following padding values to try and get the effect you are looking for without causing major issues with the mega menu:

    #top .main_menu .avia_mega a {
    margin: 13px 0;
    height: 21px;
    padding: 0 45px;
    text-align: center;
    line-height: 21px;
    outline: none;
    float: left;




    Hey thats great thanks. How would i remove the gray hover colour and make it so when the link is hovered over the text changes to a green like (#39b03b)?


    Hey also can i style the links with a bullet point going across and also style the actual bullet point in the same green as above as the time.



    the hover background and the color can be modified by adding this

    #top .main_menu .avia_mega a:hover{

    Of course you can change the color code and “none” can also be replaced by a color code.

    I’m not certain what you mean with the bullet, if I’m correct you can add this in too

    #top .main_menu .avia_mega a:hover {
    background: none repeat scroll 0% 0% transparent;
    color: #FF0099;

    .main_menu .avia_mega, .main_menu .avia_mega ul {
    list-style: circle outside none;

    OR you can try this and refer to your list image instead of the list-style I assigned.

    However – neither of these last two options are recommended. It’s easier to assign a background image to your list items that look like list bullets.

    I hope this helps :)




    Thanks for that its now getting there the next thing i need to do is remove the grey hover that is over the link of the page you are currently on, also when you hover over the other links there is a grey line that appears on the link, i would like to remove this also. . Thanks again!


    Hi ToGoWest,

    Add this to your custom CSS.

    #top .main_menu .avia_mega > .current-menu-item > a {
    background: none repeat scroll 0 0 #F8F8F8;

    #top .main_menu .avia_mega > li:hover, #top .main_menu .avia_mega > .current-menu-item {
    border-left: 0;




    Thats got rid of the line great thanks. I also wont to get rid of the default grey overlay that sits on the link that is currently selected. Thanks again!


    In abundance/js/avia.js delete following code – this will remove the hover effect:

    //activates the hover effect for image links
    if((jQuery.browser.msie && jQuery.browser.version < 9))
    jQuery('#main, .main_menu').avia_activate_hover_effect();

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Template changes to menu’ is closed to new replies.