Drop Down Menu – by Shailan

  • Is anyone good with these drop down and can answer some questions for me?

    https://www.AverageGuyGolf.com, my theme didn’t have a default drop down menu set up so I have to use a plugin and this one seems to work pretty well. The issue I have is the only “theme” with in the plugin that fits in the black bar on my template and looks natural is the theme “none”. The problem is the drop downs appear horizontal, I’d like them go appear vertical.

    So I want the top menu, to be horiztonal as it is, but when you hover over a menu item, I want the drop downs to go down (vertical) as opposed to left to right (horizontal).

    Any help would be greatly appreciated.

    Thanks

Viewing 15 replies - 1 through 15 (of 19 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In style.css

    Add a new style

    ul.sub-menu{
 width: auto;
}

    Thread Starter KconleyK

    (@kconleyk)

    anywhere in style.css?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’d say put it down at the very bottom

    Thread Starter KconleyK

    (@kconleyk)

    thanks, I tried that but the drop down still appears horizontally.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The problem is this plugin is adding styles, not into styles.css, but to the same page of the menu.

    Is there a way you can edit this page (in which the navigation is)?
    Then place that code

    ul.sub-menu{
 width: auto;
}

    underneath the styles added.

    If you can’t, add this instead, at the bottom of style.css

    ul.sub-menu{
 width: auto !important;
}

    Thread Starter KconleyK

    (@kconleyk)

    Ok I put it at the bottom of style.css and it works! I now have a drop down menu that goes vertical.

    Last question, is there are way to make the drop down area wider? It is only wide enough for one word, so if the page name is “Recent Forum Topics” it takes of three lines of the menu and makes it look weird. Do I just change the width: auto to a pixel size?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    There are a few things to clean your menu up, bear with me

    Thread Starter KconleyK

    (@kconleyk)

    Thanks man, you have been such a big help this morning.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Add display:block & add what ever width you want (I chose 160px because it looks okay)

    ul.sub-menu{
 display: block;
 width: 160px;
}

    Then add a new style underneath

    ul.sub-menu a{
 display: block;
 padding: 5px;
}

    Thread Starter KconleyK

    (@kconleyk)

    at bottom of style.css correct?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    yes

    Thread Starter KconleyK

    (@kconleyk)

    Looks the padding one worked but the width one didn’t, what did I do wrong there?

    ul.sub-menu{
    display: block;
    width: 160px; !important;
    }

    ul.sub-menu a{
    display: block;
    padding: 5px;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    ul.sub-menu{
    display: block;
    width: 160px !important;
    }

    Thread Starter KconleyK

    (@kconleyk)

    You are great, thanks man.

    One last question and I am not sure there is a fix for it, might be the slider plugin messes with drop down but I can only go about half way down the drop downs and the drop down disappears before I can get to the bottom selections. Is this because of the slider plugin? Anyway to make the drop down stay up no matter what?

    Thread Starter KconleyK

    (@kconleyk)

    Nevermind I move the nav bar to the top of the header so it isn’t right on top of the slider and it is working perfectly.

    I can’t thank you enough for your help

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Drop Down Menu – by Shailan’ is closed to new replies.