Top bar submenu (drop down)

Started by: Megha October 23, 2017 - 09:58

Hello! I am using the smarty school theme. I have applied style 1 to the header which allows me to create a menu in the top bar. However, the dropdown or the sub pages in the top bar are not visible on clicking the parent link(the URL is currently set as blank). Let me know how I can fix that, it is crucial to the website.

Replies:

  • Author Team
    #5490 Reply

    Felix
    Hi,
    Could you send us a link to your page and we will check it for you?

    regards

    #5508 Reply

    Megha
    Sure! beacon.dhruvgoyal.com

    You can see "Quicklinks" on the top bar, I want it to have a dropdown to other submenus/pages.

    Author Team
    #5510 Reply

    Felix
    Hi,
    Unfortunately, there is no option to add a dropdown list to the top bar by the theme default. It needs to customize the header templates to realize your request.
    regards
    #5530 Reply

    Megha
    Okay, could you point me in the direction of how I can customise the theme to achieve this request?
    Author Team
    #5531 Reply

    Felix
    Hi,
    You can change it from this directory: \wp-content\themes\smarty\parts\school

    regards

    #5562 Reply

    Megha
    Thanks, I've changed the theme so that the submenus in the top bar are now showing, however i need it as a dropdown and right now it shows as a list. Please give me the css that will achieve that and make it compatible with the theme defaults as well. You can see what it's like now :

    beacon.dhruvgoyal.com

    Author Team
    #5565 Reply

    Felix
    Hi,
    It seems you fix the issue. It displays correctly for us [screenshot].

    regards

    #5609 Reply

    Doug
    Could you please share how you got the menu items to dropdown? I was able to modify the top-bar-1.php file to show the sub-menu items, but they are being presented as list, like you described. Could you please share any code that you used to make it work as a drop-down menu?

    Thank you!

    Author Team
    #5614 Reply

    Axel
    Hello Doug,

    You can use custom CSS like:

    .stm-nav__menu > .menu-item .sub-menu {
    position: absolute;
    left: 0;
    background: #00aaff;
    min-width: 150px;
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

    .stm-nav__menu > .menu-item .sub-menu > .menu-item {
    position: relative;
    }

    .stm-nav__menu > .menu-item .sub-menu > .menu-item > a {
    position: relative;
    display: block;
    white-space: nowrap;
    padding: 9px 30px;
    line-height: 24px;
    color: #fff;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    }

    Regards

    #5642 Reply

    Doug
    Thanks so much for the code. I've tried to use this for our "Quick Links" menu on our page, but it doesn't seem to be working. I have modified the top-bar-1.php file to allow a depth of 2 for the top bar navigation menu and I have included the CSS you provided, but I am not able to get the menu to appear. You can see an example of our page here: http://beta.nrcaknihts.com. Any suggestions would be greatly appreciated.

    Thanks,
    Doug

    #5643 Reply

    Doug
    Sorry, I mis-typed the URL for our test site. The correct URL is: http://beta.nrcaknights.com

    Thanks,
    Doug

    Author Team
    #5645 Reply

    Felix
    replied to: #5643
    Hi Doug,
    The "Quick Links" section doesn't have list items on your site. Please add items to that section and check it again.

    regards

    #5646 Reply

    Doug
    Sorry Felix, I had added them locally, but forgot to add them to the public site. The items show now when I inspect the page, but they still are not appearing in a drop-down under Quick Links.

    Thanks,
    Doug

    Author Team
    #5652 Reply

    Baxter
    Here is a Custom CSS for your Top Bar:

    .top-bar_view-style_1 { 
    z-index: 999;
    } .top-bar__nav-menu.stm-nav__menu > .menu-item:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    z-index: 9999;
    } inspector-stylesheet:9
    .top-bar__nav-menu.stm-nav__menu > .menu-item .sub-menu {
    left: auto;
    right: 0;
    }
    #5663 Reply

    Doug
    Thanks so much! That worked well!!

    Doug

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