Navigation Menu Edits

Ask for help or provide support to other members.
Post Reply
govindsoni
Posts: 2
Joined: Mon Apr 17, 2023 12:12 pm

Navigation Menu Edits

Post by govindsoni »

Hi , I am trying to add subpages under a page and the navigation menu on top looks very odd and it shows all sub page links by default . Is there a way I could make it to be shown upon clicking or hovering over only please. I am using WonderCMS 3.4.1, and Essence Default WonderCMS theme (2020). Pleaes find the screenshot https://tagderpflege.org/

Image
Attachments
screencapture-tagderpflege-org-2023-04-17-13_17_14.png
screencapture-tagderpflege-org-2023-04-17-13_17_14.png (512.38 KiB) Viewed 5468 times
screencapture-tagderpflege-org-2023-04-17-13_16_47.png
screencapture-tagderpflege-org-2023-04-17-13_16_47.png (527.16 KiB) Viewed 5468 times
screencapture-tagderpflege-org-2023-04-17-13_17_14.png
screencapture-tagderpflege-org-2023-04-17-13_17_14.png (2.77 MiB) Viewed 5468 times
govindsoni
Posts: 2
Joined: Mon Apr 17, 2023 12:12 pm

Re: Navigation Menu Edits

Post by govindsoni »

By digging more into the issue , I found only solution by changing theme to 'sky'. https://github.com/WonderCMS/wondercms/issues/181
User avatar
nox
Posts: 33
Joined: Sat May 23, 2020 9:02 pm

Re: Navigation Menu Edits

Post by nox »

Hello,
here is a small CSS snippet for Essence theme which you can add and try it out on your webiste.
Copy and paste inside footer editable area (above or below copyright text) or static content (About your website) area.
If you are using Summernote Editor, click on code view icon and then paste.

Code: Select all

<style>
/* Essence theme dropdown menu */
.nav a {border-bottom: 1px solid transparent;}
.subPageDropdown {padding-left: 15px;}
.subPageDropdown li {margin: 0;}
/* Breakpoint desktop */
@media (min-width: 992px) {
.nav-link {position: relative;}
/* Dropdown, hidden by default */ .subPageDropdown {display: none; list-style-type: none; background: #665fee; background-image: none; background-image: -webkit-linear-gradient(45deg, rgb(82, 125, 238) 0%, rgb(39, 194, 222) 100%); box-shadow: 0 10px 20px rgba(0,0,0,.2); padding: 5px; border-radius: 5px; position: absolute; max-width: 240px; z-index: 1140;}
/* Dropdown, show on hover */ .nav-link:hover + .subPageDropdown, .subPageDropdown:hover {display: block;}
/* Tier 3 menu */ .subPageDropdown .subPageDropdown {position: relative; display: block; border-radius: 0; background: rgba(0,0,0,.2);}
.nav>.subpage-nav>.nav-link:hover {border-color: transparent !important;}
/* Primary menu, square indicator */ .nav>.subpage-nav>.nav-link::after {content: ' '; display: inline-block; margin-left: 5px; width: 8px; height: 8px; border-radius: 2px; background: #b9dcfb; box-shadow: 0px 0 6px 3px #a5d5ff;}
</style>
essence-dropdown-screen.png
essence-dropdown-screen.png (47.72 KiB) Viewed 5457 times
Post Reply