This topic contains 3 replies, has 2 voices, and was last updated by  admin 1 day, 18 hours ago.

3rd tier navigation unexpected results

  • Hi,

    The website that I’m working on is not live and you cannot get to it without a username/password. Please message me for this information so that you can take a look at what I’m running up against.

    For the most part our website has 2 levels of navigation – top navigation and the single drop down. In one instance however we have a navigation that is 3 levels. See screen shots attached for desktop and tablet views.

    On a desktop the navigation works great. We have Envision your Home > View our gallery > and then the individual gallery pages like living rooms, kitchens, etc.

    On a mobile and tablet devices the 3rd tier navigation (living rooms, kitchens, etc) are showing immediately but you can’t see them as they sit off the screen to the right and so you get scroll bars to the right and bottom of the navigation. This isn’t ideal.

    Ideally I would like the the link for View our Gallery to link to this page: http://concepthomes.ca/pddemo/view-our-gallery/

    But then have an arrow on the right and if you click on that arrow you get the 3rd level dropdown. See mock up screens 1 and 2. Can this be done? If it’s not included in the cost of the theme can I pay to get this programmed?

    Thanks
    Tanya

    Attachments:
    You must be logged in to view attached files.

    Can I get an update on this item? I haven’t heard anything from support yet.

    Thanks
    Tanya

    Hi there,

    I see that someone has updated the code on this and I love how it is looking so far. I would like to tweak the formatting a bit and I can do that by myself if you can provide me with a bit of guidance.

    Can you provide me with the CSS that I would need to affect the look of the three menu items (1st tier, 2nd tier and 3rd tier) for a mobile view? Please see the screen shot attached.

    I’m guessing that the CSS would start with the code below but I’m not 100% sure.

    @media(max-width: 767px){

    }

    If you could start me off with the css for the mobile navigation and the css for the 3 tiers that would be great.

    Thanks
    Tanya

    Attachments:
    You must be logged in to view attached files.

    Hi,

    You can use these class name to make custom css for your menu:

    1. ‘.navbar-nav > li’ for 1st menu items.
    2. ‘.navbar-nav li.drop ul.dropdown li’ for 2nd menu items.
    3. ‘.navbar-nav li.drop ul.dropdown .dropdown li’ for 3rd menu items.

    Thanks!

    • This reply was modified 1 day, 18 hours ago by  admin.

You must be logged in to reply to this topic.