Multiple Main Menu Links using Page Scroll ID Plugin?
-
I am trying to create a partially single page website, which scrolls down to specific headings on clicking the links in the main menu.
The highlighting of the main menu is controlled by my theme, factory business. As the ‘About Us’ page is on the same page as the home page, both of those links are highlighted. I am using custom links under main menu options, with the IDs of the rows as ‘anchors’.
I know there must be a way to disable the highlighting of all the links, and only highlighting the ‘Home’ Tab, switching over on click, but I can’t figure it out.
Despite this the Page Scroll to ID plugin is a great service and I thoroughly recommend it.
I would greatly appreciate any help whatsoever in sorting this out.
If interested, here is (What I think is) the relevant css code from the theme’s fss dile:
.cg-header-fixed .menu > li.menu-item-has-children { margin-right: 10px; } .cg-primary-menu .menu > li > a { display: block; position: relative; color: #fff; padding: 20px 20px; } .cg-primary-menu .menu > li.menu-item-has-children > a { padding-right: 34px; } .cg-header-fixed .menu > li.menu-item-has-children > a:after, .cg-primary-menu .menu > li.menu-item-has-children > a:after { content: "\f3d0"; font-family: 'Ionicons'; position: absolute; font-size: 10px; margin-left: 7px; font-weight: 300; } .cg-submenu-ddown { background-color: #fff; } .menu-full-width .cg-submenu-ddown { margin-left: 0px; } .cg-header-fixed .menu > li .cg-submenu-ddown, .cg-primary-menu .menu > li .cg-submenu-ddown { display: none; position: absolute; z-index: 1000; width: 210px; box-sizing: border-box; box-shadow: 0px 4px 12px -3px #808080; margin-top: 40px; transition: all 0.5s ease 0s; opacity: 0; } .cg-header-fixed .menu > li:hover .cg-submenu-ddown, .cg-primary-menu .menu > li:hover .cg-submenu-ddown { margin-top: 0px; opacity: 1; } .cg-header-fixed .menu > li .cg-submenu-ddown { margin-top: -3px; } .cg-header-fixed .menu > li.menu-full-width .cg-submenu-ddown li, .cg-primary-menu .menu > li.menu-full-width .cg-submenu-ddown li { margin-left: 0px; margin-right: 0px; } .cg-header-fixed .menu > li.menu-full-width .cg-submenu-ddown .container > ul > li a:hover, .cg-primary-menu .menu > li.menu-full-width .cg-submenu-ddown .container > ul > li a:hover, .cg-primary-menu .menu > li.menu-full-width .cg-submenu-ddown .container > ul > li:hover a { background: transparent; border-color: transparent; } .cg-primary-menu.cg-primary-menu-center .menu > li .cg-submenu-ddown, .cg-primary-menu.cg-primary-menu-left .menu > li .cg-submenu-ddown { top: 100%; } .cg-header-fixed .menu > li .cg-submenu-ddown:before, .cg-primary-menu .menu > li .cg-submenu-ddown:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: -15px; z-index: -1; } .cg-header-fixed .menu > li .cg-submenu-ddown ul, .cg-primary-menu .menu > li .cg-submenu-ddown ul { padding: 0px; list-style: none; } .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item-title ul { padding-right: 0px; margin-top: 23px; } .cg-primary-menu.cg-primary-menu-center .menu > li .cg-submenu-ddown ul { text-align: left; } .cg-header-fixed .menu > li .cg-submenu-ddown ul li.image-item a, .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item a, .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item ul li.image-item a, .cg-header-fixed .menu > li .cg-submenu-ddown ul li.image-item ul li.image-item a { font-size: 0; } .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item ul li.image-item a img, .cg-header-fixed .menu > li .cg-submenu-ddown ul li.image-item ul li.image-item a img { margin-top: 12px; } .cg-header-fixed .menu > li .cg-submenu-ddown ul li.image-item a:hover img, .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item a:hover img, .cg-header-fixed .menu > li .cg-submenu-ddown ul li.image-item-title a:hover img, .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item-title a:hover img { opacity: 0.9; } .cg-header-fixed .menu > li .cg-submenu-ddown ul li.image-item li a, .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item li a { font-size: inherit; } .cg-header-fixed .menu > li .cg-submenu-ddown ul li.image-item:before, .cg-primary-menu .menu > li .cg-submenu-ddown ul li.image-item:before { display: none; } .cg-header-fixed .menu > li .cg-submenu-ddown .container, .cg-primary-menu .menu > li .cg-submenu-ddown .container { max-width: 100%; padding: 0px; } .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul > li a, .cg-submenu-ddown .container > ul > li > a { padding: 6px 0px; font-size: 13px; line-height: 1.4em; display: block; padding: 14px 20px 12px 20px; border-bottom: 1px solid #f4f4f4; transition: 0.1s all ease-in-out; color: #333; margin-top: -1px; } .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul > li:first-child a { margin-top: 0px; } .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul > li:last-child a { border: none; } .cg-primary-menu .menu > li.current-menu-item:hover > a, .cg-primary-menu .menu > li.current-menu-ancestor:hover > a { opacity: 1; } .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul > li:hover a, .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul > li:hover a, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul > li a:hover, .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul > li a:hover, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children > a:hover:after { opacity: 1; background-color: #1592c6; transition: 0.1s all ease-in-out; } .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children { position: relative; } .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children > a, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children > a { position: relative; } .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children .cg-submenu, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children .cg-submenu { position: absolute; left: 210px; background-color: #111; top: 0px; } .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children .cg-submenu li, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children .cg-submenu li { background: #fff; width: 210px; } .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children:hover > .cg-submenu, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children:hover > .cg-submenu { display: block; } .cg-header-fixed .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children .cg-submenu, .cg-primary-menu .menu > li .cg-submenu-ddown .container > ul .menu-item-has-children .cg-submenu { display: none; } .cg-header-fixed .menu > li.menu-full-width .cg-submenu-ddown, .cg-primary-menu .menu > li.menu-full-width .cg-submenu-ddown { width: 100%; left: 0; background: #fff; padding: 15px 25px 0px 25px; }
The topic ‘Multiple Main Menu Links using Page Scroll ID Plugin?’ is closed to new replies.