→→ Please check out our new WP Theme: Navian - Responsive Multi-Purpose WordPress Theme ←←
In case you can't login to submit a ticket, please hard refresh the browser and try to login again.
If the problem persists, please send us a message via THEMELOGI profile page so we can help you out.
To update the theme or plugins, please have a look on the article here: Theme & Plugin Updates.
Also, if you couldn't import the demo content or the site is blank, please see our FAQs page for the solutions. Thank you :)

Tickets Tickets Roneous Vertical alignment of header menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #9584

    Hi –

    I’m having an issue with the dropdown menus on my site. The dropdown menus appear below the header, which is fine, however the parent menu text is centered vertically in the header, so there is a gap between the main menu and the base of the header with the dropdown menus. Is there a way to align the text at the base of the menu so that the dropdown menus are connected to the parent links?

    Thanks

    #9585
    This reply has been marked as private.
    #9586
    This reply has been marked as private.
    #9590
    Danny
    Supporter

    Hi there,

    Thanks for writing in!

    To resolve this issue, please add the code below to your Dashboard > Appearances > Customize > Addition CSS (move the submenu dropdown upper to connect with menu item) :

    nav .menu > li > ul li a:hover {color: #a4a4a4;}
    @media (min-width: 991px) {nav .menu > li:hover > ul {transform: translate3d(0,-30px,0);-webkit-transform: translate3d(0,-30px,0);-moz-transform: translate3d(0,-30px,0);}}

    If the problem persists, please share us your site URL and the admin account of your site via private reply so we can investigate your case and help you out. Any screenshots would be welcomed!

    Hope this helps,
    Danny

    #9594
    This reply has been marked as private.
    #9595

    It does appear to have moved the dropdown menu up into the header a bit, but not quite connected, and it looks off kilter.

    (Hopefully I did the private post with the relevant information correctly. If not, please let me know.)

    Thanks

    #9599
    Danny
    Supporter

    Hi there,

    Thanks for your info!

    Yes, I’ve added your IP into the allowed list.

    To create a connect between parent menu & submenu, please change/replace the CSS code above into this (you only need to copy/paste into Addition CSS field) :

    @media (min-width: 991px) {
    	nav .menu > li >a:before {border-top-color: #fff;left: 50%; bottom: 0; -webkit-transition: width .25s ease-out, left .25s ease-out, border-color .25s ease-out; transition: width .25s ease-out, left .25s ease-out, border-color .25s ease-out; position: absolute; display: block; top: auto; width: 0; content: ''; padding-bottom: inherit; border-top: 4px solid; }
    	nav .menu > li:hover >a:before, nav .menu > li.current-menu >a:before, nav .menu > li.current-hover >a:before, nav .menu > li.current-menu-ancestor >a:before {width: 100%;left: 0;}
    	nav .menu > li > a {position: relative;}
    }

    If the problem persists, please share us your site URL and the admin account of your site via private reply so we can investigate your case and help you out.

    Best regards,
    Danny

    #9601

    It is saying there is an error in this code?
    nav .menu > li > a {position: relative;}

    Also, with all of this, the menu is not moving – it is just affecting the dropdown part.

    #9611
    Danny
    Supporter

    Hi there,

    Thanks for your info!

    I’ve tried to adding that code into my Dashboard > Appearances > Customize > Addition CSS, but I can’t see the error, could you please share us the error message since I don’t have access to your Admin to check it.

    Also, could you please specific more details about what you want in the menu, I’ve just tried to adding the hover effect into the menu, so you can see which menu is opening the submenu as you can see in the .gif file here: https://ibb.co/MVxKK0v

    If it isn’t what you want, please specific more details so we can understand it better, any screenshot or screencast video would be welcomed!

    Looking forward for your response!

    Best regards,
    Danny

    #9620

    ……..It is saying that my prior post was mode, but it’s not showing?

    #9625

    So I made a private reply that never showed, even though when I tried to post it again it said it was a duplicate. I’ll post most of it as a nonprivate reply and see.

    I’ll try one other thing before passing on login info. 🙂

    I altered the numbers if the original code you gave me

    nav .menu > li > ul li a:hover {color: #a4a4a4;}
    @media (min-width: 991px) {nav .menu > li:hover > ul {transform: translate3d(0,-30px,0);-webkit-transform: translate3d(0,-30px,0);-moz-transform: translate3d(0,-30px,0);}}

    to this

    nav .menu > li > ul li a:hover {color: #a4a4a4;}
    @media (min-width: 991px) {nav .menu > li:hover > ul {transform: translate3d(0,-55px,0);-webkit-transform: translate3d(0,-55px,0);-moz-transform: translate3d(0,-55px,0);}}

    But the parent menu is not at the bottom of the header. Here’s how I’m trying to get it to look.
    menu
    I want to move the parent menu to the bottom of the header.
    Thanks!

    #9632
    Danny
    Supporter

    Hi there,

    I’m really sorry for your inconvenience!

    Yes, we’re offer support via email too, so please feel free to ask you questions here.

    I’ve see your screenshot about what you want here:

    So to make the menu item to bottom as you screenshot above, please remove all the previous custom CSS code, and add the new code below to your Dashboard > Appearances > Customize > Addition CSS:

    @media (min-width: 991px) {nav .menu > li > a {line-height: 1;padding-top: 90px;}}

    If this doesn’t work, please share us the admin account of your site so we can investigate your case and help you out.

    P.S: I’ve replied to your email too, so please check your inbox if needed.

    Best regards,
    Danny

    #9681

    I’m testing replying on here before I respond via email.

    That code worked. I modified it slightly to
    @media (min-width: 991px) {nav .menu > li > a {line-height: 1;padding-top: 100px;padding-bottom:10px;}} and it works perfectly.

    Thanks!

    #9692
    Danny
    Supporter

    Hi! You’re welcome! 🙂 I’m glad you sorted it out!

    Best regards,
    Danny

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