Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #518789

    Hi Enfold,

    I have to issues:

    1. Style of single Main Menu Button – not effecting the rest of the main menu items
    2. Connecting Main Menu Button with Sub Menu Items – so both are highlighted as ‘current’ or ‘Active’, when Sub Menu Item is Active

    1.
    I need to style only a single button on my Main Menu, so that the text shows this color: #ef3e5b when the button is active (i.e. selected). The Main Menu Button Item is ‘SINCE 1995′.

    How to do this? I know that the Main Menu Button Item ID = 6574. And I have given the button a Style Class = menubutton. But I can’t get css codes found on forum to work.

    2.
    At the same time the page ’20 års jubilæum’, which the Main Menu Button ‘SINCE 1995′ is referring to, is connected to the Sub Menu, where the Portfolio items 1995, 1997, 1999 etc. all have the page ’20 års jubilæum’ as parent page / breadcrumb page.

    However, when I select one of the Sub Menu Items (i.e. Portfolio Items) the Main Menu Button is not ‘Active’ or ‘Highligted’ anymore. When Sub Menu Items are ‘Active’ I also need the Main Menu Button to be ‘Active’, so both are highlighted as ‘current’ or ‘Active’, when Sub Menu Items are ‘Active’

    How do I style this?

    Best regards
    ChangeGroup

    Ps. 1. is the most critical of the two.

    #518966

    Hey!

    1. Use this:

    #menu-item-6574 span.avia-menu-text {
        color: #ef3e5b !important;
    }

    2. How should the main menu button look when ‘active’?

    Regards,
    Josue

    #519132

    1. Perfect for this Josue. Thank you !!!

    2. I actually just want it to look the same as when HOVER. I use this CSS on HOVER:

    #top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text {
    background: black;
    color: #f3c463 !important;
    font-style: bold;
    border-color: black;
    }

    So the text-color should be #f3c463.

    #519823

    Ok, try using this code instead:

    #top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text, #top.single-portfolio #wrap_all .header_color .av-menu-button-colored > a > .avia-menu-text {
    background: black;
    color: #f3c463 !important;
    font-style: bold;
    border-color: black;
    }
    
    

    Best regards,
    Josue

    #520815

    Hi Josue,

    This works perfectly connecting the Main Menu and Sub Menu, when active.

    But when Main Menu page ’20 års jubilæum’, which the Main Menu Button ‘SINCE 1995′ is active by itself, it do not show the same color #f3c463, but still white when active: http://www.changegroup.dk/20-aars-jubilaeum/

    I use the following CSS:

    #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    background: black;
    color: #ffffff !important;
    font-style: bold;
    border-color: black;
    }
    #top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text {
    background: black;
    color: #f3c463 !important;
    font-style: bold;
    border-color: black;
    }
    #menu-item-6574 span.avia-menu-text {
        color: #f3c463 !important;
    }
    #top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text, #top.single-portfolio #wrap_all .header_color .av-menu-button-colored > a > .avia-menu-text {
    background: black;
    color: #f3c463 !important;
    font-style: bold;
    border-color: black;
    }
    #521270

    Hi!

    Try with this:

    #top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text, 
    #top #wrap_all .header_color .current-menu-item > a > .avia-menu-text,
    #top.single-portfolio #wrap_all .header_color .av-menu-button-colored > a > .avia-menu-text {
        background: black;
        color: #f3c463 !important;
        font-style: bold;
        border-color: black;
    }

    You can replace the previous codes with that.

    Best regards,
    Josue

    #522216

    Hi Josue

    Maybe I didn’t specify: I only need the Main Menu button item to highlight color: #f3c463 (#menu-item-6574)
    So the above code did work, but now it highlights every Main Menu item with color: #f3c463.

    I have change the code back to the previous, as the website is live at the moment.

    #522218

    Ok try with this:

    #top #wrap_all .header_color .av-menu-button-colored > a:hover > .avia-menu-text, 
    #top #wrap_all .header_color .av-menu-button-colored.current-menu-item > a > .avia-menu-text,
    #top.single-portfolio #wrap_all .header_color .av-menu-button-colored > a > .avia-menu-text {
        background: black;
        color: #f3c463 !important;
        font-style: bold;
        border-color: black;
    }

    Best regards,
    Josue

    #522228

    Hi Josue,

    That is perfect. Thank a lot for your time and help.

    Best Regards,
    ChangeGroup

    #522235

    You are welcome, glad to help :)

    Regards,
    Josue

    #627288

    Hi Josue,

    Same issue as above, but in regards to another page, where I need to connected a ‘Custom Menu’ in a sidebar with active blog posts:

    I have create a new ‘Investor Relations’ page on our website. This consists of 5 pages, all with the same left ‘sidebar’.
    In this sidebar I have a widget with a ‘Custom Menu’. Please see the content below.
    In the news (Meddelelser) section of the Investor Relations page, I would like to highlight the selected menu (Meddelelser), when the Investor Single Blog Posts are active.

    For example:
    When the ‘Meddelelser’ is active, this is highlighted with the light blue color on the sidebar custom menu. But when a choose one of the blog posts on the ‘Meddelelser’ page, the menu item ‘Meddelelser’ is not highlighted with the light blue color on the sidebar custom menu.

    How do I connect the active blog posts with the Custom menu item ‘Meddelelser’? Note that all blog post have showed on ‘Meddelelser’ are categorized as Investor Content. Category is named: Investor Nyhed.

    Hope the above makes sense.

    Br
    ChangeGroup

    #629698

    Hi,

    Those are simple custom menus created directly in the fullwidth submenu element, that’s why the default menu classes are not being applied. We already suggested to create an actual menu and then use it in the full width sub menu element.

    Best regards,
    Andy

    #630549

    Hi Andy,

    What are you commenting on? It doesn’t make any sense to me. You haven’t suggested anything to me in the above replies, other than CSS code implementation? I’m asking another question than the original one. Did you read my latest post thoroughly?

    I have created an ‘actual menu’, which I use in the widget ‘custom menu’, so that this ‘actual menu’ can be viewed in the sidebar…..

    Br
    ChangeGroup

    #631836

    Hi,

    The “current-post-ancestor” class attribute should be applied in the active category if you’re on a single post page. Please post the login details here so that we can check the settings. If I am not mistaken, “Meddelelser” is a page without any hierarchical connection to the actual post.

    Best regards,
    Ismael

    #633551

    Hi Ismael,

    Thank you :)
    That makes sense, as I want to ‘connect’ the page ‘meddelelser’ with the singe blog posts visible on that page. All the single blog posts in the ‘blog grid’ are within the same category ‘Investor’.

    Hope you can help me with this.

    Best regards
    ChangeGroup

    #634860

    Hi,

    The “meddelelser” page should be an actual category of the post for this to work. You can set “meddelelser” as category of the post then go to the Appearance > Menus panel, enable the “Categories” taxonomy in the Screen Options then replace the “meddelelser” menu item with the category version. If you need the “Grid Layout” for archive pages, add this in the functions.php file:

    add_filter('avf_blog_style','avia_change_category_blog_layout', 10, 2); 
    function avia_change_category_blog_layout($layout, $context){
    if($context == 'archive') $layout = 'blog-grid';
    return $layout;
    }

    Best regards,
    Ismael

    #635049

    Hi Ismael,

    Thank you. That could work fine for me.
    I will try that instead. I will get back to you soon.

    Br
    ChangeGroup

    #635681

    Hi,

    Alright. We’ll keep the thread open. :)

    Best regards,
    Ismael

    #636730

    Hi Ismael,

    I have tried your suggestion. But I can’t get it to work properly.

    I have created a new sidebar menu, where ‘Meddelelser’ is the category ‘Investor’. But when I am on a single blog post, within the category ‘investor’, then meddelelser is not highlighted with light blue color.

    Can you figure out, what I’m missing?

    #637370

    Hi @ismael,

    I also realized that your suggestion means that I cannot control how the featured image is displayed.
    Looking at @josue codestyling above, can’t this be used, as the issue is the same, but now the menu is just a different one that I need to highlight?

    Br
    ChangeGroup

    #638386

    Hi,

    We added the actual category of the post which is “Investor” in the menu and then added the following css code:

    .current-post-ancestor.current-menu-parent a {
        color: blue;
    }

    It works. The point is, you have to apply “Meddelelser” as the category of the posts or change the label of the “Investor” menu items to “Meddelelser”.

    Best regards,
    Ismael

    #638610

    Hi @ismael,

    Perfect. That’s what I was looking for. But how can I change the looks of the blog grid on the ‘Achived page’?
    I want the blog grid on ‘Meddelelser Test’ to look like the one on ‘Meddelelser’.

    The blog style I have selected:
    – Grid layout
    – 3 columns
    – Title and Excerpt + Read More Link
    – Choose the preview image size manually (select thumbnail size)
    – No scaling (Original width X original height)
    – 9 Post number
    – Deactivate Offset number
    – Pagination Yes
    – Always Display the element Conditional display

    And I have a CSS for ‘Læs Mere’ (Read More) under each blog grid post:

    .invfront a.more-link {
    top-padding: 10px;
    color: #2c4143;
    font-weight: bold!important;
    }

    What CSS should I apply to change the blog grid to match the layout of ‘Meddelelser’?

    • This reply was modified 4 years, 4 months ago by  changegroup. Reason: added CSS for read more button I use
    #639090

    Hi,

    I checked both pages and they look the same, only difference I noticed is the featured image. If you want to set the image to “– No scaling (Original width X original height)”, you have to modify the archive.php file and alter the avia_post_slider attributes.

    $atts   = array(
                                    'type' => 'grid',
                                    'items' => get_option('posts_per_page'),
                                    'columns' => 3,
                                    'preview_mode' => 'custom',
    	            'image_size' => 'extra_large',                             
                                    'class' => 'avia-builder-el-no-sibling',
                                    'paginate' => 'yes',
                                    'use_main_query_pagination' => 'yes',
                                    'custom_query' => array( 'post__in'=>$post_ids, 'post_type'=>get_post_types() )
                                );

    http://www.changegroup.dk/category/investor/
    http://www.changegroup.dk/investor-relations/meddelelser/

    Best regards,
    Ismael

    #639158

    Great Ismael, just great!
    This works perfectly :)

    However, only thing missing is the ‘Read More’ tag (Læs mere) under each blog post.
    I have tried adding the following to functions.php in child-theme, but didn’t work:

    function change_blog_archive_style() {
    global $avia_config;
    if(!is_single()){ $avia_config[‘blog_content’] = “excerpt_read_more”; }
    }
    add_action(‘get_header’, ‘change_blog_archive_style’);

    #639169

    Hi again,

    I made it work, but need to style the ‘Read More’ tag on the achieve page to bold text?
    How can I make this work?

    The styling I use for *Read More’ tag on other ‘blog grids’:

    .invfront a.more-link {
    top-padding: 10px;
    color: #2c4143;
    font-weight: bold!important;
    }

    I added the missing ‘Read More’ tag by first deleting the following, which I had added in functions.php:

    function change_blog_archive_style() {	
    	global $avia_config;
    	if(!is_single()){ $avia_config['blog_content'] = "excerpt_read_more"; }
    }
    add_action('get_header', 'change_blog_archive_style');
    

    And added instead to achieve.php:
    'contents' => 'excerpt_read_more',
    Which Josue suggested in the post: https://kriesi.at/support/topic/add-read-more-text-on-grid-blog-archive-page/

    Br
    ChangeGroup

    • This reply was modified 4 years, 4 months ago by  changegroup.
    #639630

    Hi,

    Alright. This should work:

    .archive .more-link {
        font-weight: bold;
        font-size: 12px;
    }

    For a quick guide regarding css, you might want to read this: http://kriesi.at/archives/wordpress-developers-your-complete-guide-to-conquering-css-in-2016

    Best regards,
    Ismael

    #640178

    Hi Ismael,

    Thanks a lot for your help with all the styling. It works great!
    I will take a look at the guide :)

    Br
    ChangeGroup

Viewing 27 posts - 1 through 27 (of 27 total)

The topic ‘Style of single 'Menu Button Item' + link to submenu’ is closed to new replies.