Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • February 3, 2015 at 5:44 pm #390249
    lipstick

    Hi,
    I use Enfold for several sites and are very satisfied with your theme. Currently I’m working on a site with several custom post types. I have created pages for each to display the posts. I would like to make the menu item active when clicking into a post. For example on your demo, if I click main menu item Blog and select Masonry Blog, the Blog menu item is highlighted. When I click one of the posts in the masonry, the highlight disapear. Is it possible to keep the Blog highlighted as I read through the posts?

    Thanks,

    Roger

    February 3, 2015 at 5:46 pm #390253
    Yigit

    Hey lipstick!

    Can you post the link to your page please?

    Cheers!
    Yigit

    February 4, 2015 at 10:23 am #390614
    lipstick

    Hi,

    Sorry, I’m working locally now so I don’t have an available site at the moment.

    I have created 4 new custom post types. For example a custom post type specified in body called single-aktivitet and also made a class in the menu item i want to highlight called menu-item-detteskjer.

    I use the .avia-menu-fx class to make the line stay visible for posts with single-aktivitet class. In addition use the text in .avia-menu-text to stay #333. I have found a solution for this by using two CSS rule. I also need to include subpages for some of the menu-items, like .parent-pageid-39 etc.

    Here’s the CSS:

    /* Nyheter */.single-post .menu-item-nyheter .avia-menu-fx,
/* Handel og service */.single-butikk .menu-item-handelogservice .avia-menu-fx, .parent-pageid-39 .menu-item-handelogservice .avia-menu-fx,
/* Bo på Løren */.parent-pageid-41 .menu-item-bopaloren .avia-menu-fx, .parent-pageid-183 .menu-item-bopaloren .avia-menu-fx,
/* Boligprosjekter */.single-boligprosjekt .menu-item-nye-boligprosjekter .avia-menu-fx,
/* Dette skjer */.single-aktivitet .menu-item-detteskjer .avia-menu-fx {
	visibility:visible; opacity:1;
}
/* Nyheter */.single-post .menu-item-nyheter .avia-menu-text,
/* Handel og service */.single-butikk .menu-item-handelogservice .avia-menu-text, .parent-pageid-39 .menu-item-handelogservice .avia-menu-text,
/* Bo på Løren */.parent-pageid-41 .menu-item-bopaloren .avia-menu-text, .parent-pageid-183 .menu-item-bopaloren .avia-menu-text,
/* Boligprosjekter */.single-boligprosjekt .menu-item-nye-boligprosjekter .avia-menu-text,
/* Dette skjer */.single-aktivitet .menu-item-detteskjer .avia-menu-text {
	color:#222;
}

    This works fine. But by using this method I don’t give any flexibility adding a new menu item. I will then need to code both fx and text when adding a new menu item. Is it possible to do this with a function or something else without hard coding every time the client adds a menu item?

    • This reply was modified 9 years, 9 months ago by lipstick.
    February 5, 2015 at 2:01 pm #391306
    Yigit

    Hey!

    Can you please try using following code instead

    li.current_page_ancestor > a > .avia-menu-text { color: #222; }
li.current_page_ancestor > a > .avia-menu-fx { visibility:visible; opacity:1; }

    Regards,
    Yigit

    February 5, 2015 at 2:06 pm #391314
    lipstick

    Hi,
    It only works for subpages, not for posts. I’ve tested both regular posts and my custom post types.

    Regards,
    Roger

    February 5, 2015 at 2:09 pm #391317
    Yigit

    Hi!

    Can you please post the link to your website when you move it to a live server or if you decide to create a testing environment?

    Regards,
    Yigit

    February 5, 2015 at 2:11 pm #391320
    lipstick

    I’m working on this now. I will let you know.

    Roger

    February 5, 2015 at 2:22 pm #391330
    lipstick
    This reply has been marked as private.
    February 5, 2015 at 2:37 pm #391338
    Yigit

    Hi!

    Can you check your website now? I checked all sublevel menu items and it does seem to work fine. Please point out the menu items if i overlooked any

    Cheers!
    Yigit

    February 5, 2015 at 2:45 pm #391343
    lipstick
    This reply has been marked as private.
    February 6, 2015 at 6:04 pm #392175
    Elliott

    Hey!

    I viewed your links but the avia-menu-fx appeared to be working fine. I don’t understand the language your using on your site though so I’m not sure if it’s on the correct menu link or not. Can you take a screenshot and highlight what your trying to do on the custom post?

    Regards,
    Elliott

    May 13, 2015 at 10:25 am #443669
    Egorro

    Hi!

    I’ve used the code 

    li.current_page_ancestor > a > .avia-menu-text { color: #222; }
li.current_page_ancestor > a > .avia-menu-fx { visibility:visible; opacity:1; }

    to underline my main menu item when submenu page selected and it works :) But the line in main menu is overlapped by the header border. I have found out that it happens because the state of the parent element does not toggle to
    element.style { overflow: visible; }
    So, how can I toggle it? Or is there any other way to overlap the nasty overlapping border? ;)

    May 13, 2015 at 11:32 am #443686
    Egorro

    Okay, guys! I made it. You should add the following line to CSS:

    #top .active-parent-item { overflow: visible !important; }

    and everything works smooth. I just did not understand why overflow was used anyway. I hope my finding will help someone.

    Have a nice working day! :)

    PS: After adding the line mentioned above 

    .avia-bullet {
  display: none !important;
}

    code does not work anymore. It’s crazy.

    How can I remove bullets from the submenu now?

    May 13, 2015 at 2:37 pm #443729
    Yigit

    Hi!

    Can you please post the link to your website? :)

    Cheers!
    Yigit

    May 13, 2015 at 3:02 pm #443747
    Egorro

    Here is the link:
    http://swn.com.ua/in-ukraine/flat-fee

    When I change the code with Chrome Inspector everything works fine, but my style.css does not have any effect on the bullets. For example:

    #top .header_color .avia-bullet {
  border-color: #54628E !important;
}

    does not even shown in Inspector. It is very strange. IE acts the same way.

    May 13, 2015 at 3:07 pm #443753
    Yigit

    Hi!

    Please add following code to Quick CSS

    .avia_mega_div .avia-bullet {
  display: none!important;
}

    If that too does not help, please post the content of your Quick CSS using http://pastebin.com/

    Regards,
    Yigit

    May 13, 2015 at 3:17 pm #443761
    Egorro

    Quick CSS worked fine, but does it mean that it is not saved in my child theme and I will have to add the code everytime I update it?

    May 13, 2015 at 3:24 pm #443765
    Yigit

    Hi!

    No, as long as theme names are matching, changes you make in theme options (including Quick CSS) are safe :)

    Cheers!
    Yigit

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