Home Forums Smarty – Education WordPress Theme Top bar submenu (drop down)

This topic contains 16 replies, has 5 voices, and was last updated by  Felix 2 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #5486

    Megha
    Member

    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.

    #5490

    Felix
    Moderator

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

    regards

    #5508

    Megha
    Member

    Sure! beacon.dhruvgoyal.com

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

    #5510

    Felix
    Moderator

    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

    Megha
    Member

    Okay, could you point me in the direction of how I can customise the theme to achieve this request?

    #5531

    Felix
    Moderator

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

    regards

    #5562

    Megha
    Member

    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

    #5565

    Felix
    Moderator

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

    regards

    #5609

    Doug
    Member

    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!

    #5614

    Axel
    Moderator

    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

    Doug
    Member

    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

    Doug
    Member

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

    Thanks,
    Doug

    #5645

    Felix
    Moderator

    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

    Doug
    Member

    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

    #5652

    Baxter
    Keymaster

    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;
    }
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.