The theme will automatically add the current-menu-item class to links I would imagine via a little javascript script. This is getting confused by the extra menu item.

A script could be written that says when “the show” ID is active add a class of current-menu-item to such a menu button. It may be easier to try and play with the menu structure first though :)

TJ

Ah good stuff :)

Each element builder handles the sort function differently so the classes and ids for masonry / portfolio etc are not the same.
Glad you sorted (get it?) it out

TJ

Morning,

There are a couple of pieces of css that you’ll need to use and tweak as to your liking

/* create each none active item as a button */
#js_sort_items a {
    background-color: #FFFFFF;
    padding: 12px 16px 10px;
    border: 1px #00aa67 solid;
}

/* create each active item as a highlighted button */
#js_sort_items .active_sort {
    background-color: #00aa67;
    color: #ffffff!important;
    padding: 12px 16px 10px;
    text-decoration: none;
}

/* add some space between the new button */
#js_sort_items a {
    margin-right: 10px!important;
}

/* remove the seperator */
.text-sep {
    display: none!important;
}

/* optional centre the buttons */

.avia-fullwidth-portfolio #js_sort_items {
    text-align: center;
}

That will produce this

TJ

• This reply was modified 7 years, 3 months ago by tjswarbs78.

Hmm i know in the latest version of Enfold the mobile menu was completely rewritten and I think some of the class behaviors changed.

On the surface i see no reason why the global rule shouldn’t work unless the theme is changing or using a different menu id on mobile.

I’ll have a gander and come back to you…

TJ

** edit **

The burger menu has the following structure…

div class="av-burger-overlay" style="display: block; opacity: 1;">
<div class="av-burger-overlay-scroll">
<div class="av-burger-overlay-inner">
<ul id="av-burger-menu-ul" class="" style="padding: 90px 0px;">
<li class="av-active-burger-items">  /* first child */
<li class="av-active-burger-items">  /* 2nd child */
<li class="av-active-burger-items">  /* 3rd child */
<li class="av-active-burger-items">  /* 4th child */
<li class="av-active-burger-items">  /* 5th child */
<li class="av-active-burger-items">  /* 6th child */
<li class="av-active-burger-items">  /* 7th child */
<li class="av-active-burger-items">  /* 8th child */
<li class="av-active-burger-items">  /* 9thchild */
<li class="av-active-burger-items">  /* 10thchild */
<li class="av-active-burger-items">  /* last child */
</ul>
</div>
</div>
<div class="av-burger-overlay-bg"/>
</div>

There are no ids or numbers to single out any specific item so we have to use a pseudo class.

To hide the first menu item on mobile you’d use…

#av-burger-menu-ul li:first-child {
    display: none!important;
}

To hide the last menu item on mobile you’d use…

#av-burger-menu-ul li:last-child {
    display: none!important;
}

to hide any in between you’d use…

#av-burger-menu-ul li:nth-child(2) {
    display: none!important;
}

replacing the two for whatever number you want to hide.

Adding any new menu items may mess up the order so you would have to finalize the menu 100% then look at the mobile version.

Hopefully that is clear as mud :)

TJ

Only thing i can think of is maybe try first-aid-courses rather than course.
I don’t know how the plug in in question handles the creation of post types but generally the slug is the post type name and used in queries.
That may even make your original code work correctly.

Worth a shot

TJ

Morning,

rather than using .page-id-xxx try using .template-search then the menu item id.
A neater way maybe to set the menu items to be hidden as a global rule rather than on a specific page.

#menu-item-xx {hide} will hide then items on every page. Which will be easier than finding every page id.
Then on the page you want them to show (which is only one page?) use..

.page-id-xx #menu-item-xx {show}

If you are hiding on more pages use a global to hide, if you are showing on more pages use a global to show. That make sense?

TJ

• This reply was modified 7 years, 3 months ago by tjswarbs78. Reason: it's early and I can't spell

Hi,

I too have tried a few different snippets to do the same thing without success.

All the snippets are trying to write a rule adding the post type to the meta.php so the ALB will load.
You can do this manually which is how I got round the issue. Not ideal if you are unfamiliar with .php
None the less if you fancy a bash go to…
config-templatebuilder>avia-template-builder>config to find meta.php

The code to alter is at the top and looks like…

$boxes = array(
    array( 'title' =>$av_default_title, 'id'=>'avia_builder', 'page'=>array('post','portfolio','page', 'course'), 'context'=>'normal', 'priority'=>'high', 'expandable'=>true ),
    array( 'title' =>__('Layout','avia_framework' ), 'id'=>'layout', 'page'=>array('portfolio', 'page' , 'post', 'course'), 'context'=>'side', 'priority'=>'low'),
    array( 'title' =>__('Additional Portfolio Settings','avia_framework' ), 'id'=>'preview', 'page'=>array('portfolio', 'course'), 'context'=>'normal', 'priority'=>'high' ),
    array( 'title' =>__('Breadcrumb Hierarchy','avia_framework' ), 'id'=>'hierarchy', 'page'=>array('portfolio', 'charity', 'publications', 'our_events', 'partners'), 'context'=>'side', 'priority'=>'low'),
);

$boxes = apply_filters('avf_builder_boxes', $boxes);

Add course to the top three arrays. That should set the ALB and all portfolio options to work with your CPT.

Not the best solution but it works

TJ

page id’s, post id’s etc only apply to things created within WordPress. These are given an ID so WordPress can identity things in functions like
is_page()

The search page isn’t really a page it’s a template to hold content that the search.php and loop-search.php will pull depending on search out come.

You can edit either of them files to style the search page button by adding a class or using in-line css. Unless using a child theme changes will be lost.

On the search result pages content is wrapped in a class of .template-search which you could use to target the button.
For example to change the color of the round pagination buttons you use…

.template-search .pagination a {
    background-color: #eebbee;
}

TJ

• This reply was modified 7 years, 3 months ago by tjswarbs78.

You can do it either way.

You can navigate to appearance>editor
On the right you can select to change the main theme files or the child theme.
Find theme header and bung the code in there just before the </head> tag.

Running a child theme is advisable for two reasons
1) any changes carry over during an update.
2) If you screw things up you have the main theme as a fallback and way to check.

Dunno how used you are to changing theme files but be careful. Any errors can wreck the site and you’ll need ftp access to change the files back.

If you have ftp access you can create a .js file and link to it from the header.

TJ

Hi,

The image only has a size 300px by 46px.

When you use the image element and are selecting the image take a look at the right hand side. There is a little drop down menu for attachment display settings. Is the image set to full size?

If you are setting an image using the column settings rather than an image element navigate to edit>colors and you can set a background image for the entire column. Again watch out for the attachment display settings.

Hope that helps a little

TJ

No worries :)

If you are using chrome you can right click on a page and inspect any element.
A new window will open with the html structure on the left and css on the right.
You can live edit a page, check resources, console errors etc

IE and firefox it’s called inspect element but works the same way

Image below looks complicated but isn’t really.
Long red box shows page-id t’other red box show menu-id

TJ

• This reply was modified 7 years, 3 months ago by tjswarbs78.

Ah keep playing a hopefully it’ll fall in to place.

With the way the Magnific Popup is structured makes editing it a bit complicated.

You have a mfp-contain that sits 100% height and width and inside that the mfp-content.
Inside the mfp-content you have the iframe scaler.

It a question of tweaking the right set of properties to get the desired effect.

The last code I sent worked fine on my end. Hmmmm!

TJ

Haha. Believe it or not.. I have a full time job and just help out for fun :)

I’m such a nerd lol
TJ

If you have access to the twitter account you can create a web widget that will embed into the site.

To do this go to setting and privacy and select widget from the left-hand menu.

Just follow the onscreen prompts.

:)

TJ