Nav Bar

Thanks for choosing Apex!

This is a rather complex customization because you need the parent link to NOT take the visitor to a new page on the first touch event (versus a click), but then function normally on a second touch. If you’re comfortable working with some Javascript, I can walk you through that.

Otherwise, a much simpler solution would be to make the dropdown arrows larger and more obvious. You can do so with the following CSS:

@media all and (max-width: 800px) {

  .toggle-dropdown {
    padding: 4px 7px;
    border: solid 1px #333;
  }
}

This is how that will look when implemented: https://pics.competethemes.com/2o1l2r2p1T3p

Hi Ben,

Thanks for your reply.

I know very little Javascript but if you wouldn’t mind talking me through it that’d be great.

I also wish for the links to have a background colour and display fullwidth, but when setting the anchor tag to display block or inline block the arrow dropdown moves – is there a way of keeping the arrow next to the link and having the whole block as the dropdown?

Thanks

Yea what you can do is make the link element display as a block, add “relative” position to the list item containing it, and then you can position the button element absolutely. The button’s positioning will need to be tailored to the menu item, but that should work pretty well.

As for the mobile menu update, check out this Javascript: https://gist.github.com/BenSibley/11865d2d6673541d9e8f

The idea is that the site waits until a touch-event is triggered which proves a touch-enabled device is being used. It then adds a “closed” class to all parent menu items. If a parent menu item with a the closed class is touched, it will remove the class and NOT visit the link. Since the closed class is only applied once a touch event is triggered, it won’t require desktop visitors to click parent menu item twice to visit it.

The last step will be to open/close the dropdown menu when the parent menu item is touched. You can fire the openPrimaryMenu function for that (Line 36 of /js/functions.js).

Brilliant, thanks for this Ben.

Another quick one you may be able to help me with:
Is there a way to display the blog homepage as a fullwidth grid with no sidebar? And then have the sidebar appear when each post is opened

Thanks

Sure thing!

You could do that with this CSS:

.home .sidebar-primary {
  display: none;
}
.home .main {
  width: 100%;
}

That will simply hide the sidebar and expand the width of the main section on the homepage only. Apex Pro also has site-wide and page-specific layout options.

Hi Ben,

I have another problem if you could possibly help me it would be much appreciated.

On my blog homepage/listings ive created there seems to be something like alt text appearing above the first featured image. I’ve inspected the element in chrome and it isnt alt text. It’s not showing up on the other featured images and I’m not sure how to remove it.

Any help much appreciated.

Thanks

Hi Ben, In addition to my previous post this has now started appearing above other featured images. It only seems to appear on mobile devices though.

Again, any help much appreciated.

Thanks

Hello,
Site link please.

Thanks.

Hi,
It’s blog.lymebayphotography.com

Thanks

Hi,
It’s blog.lymebayphotography.com

Thanks

Hey Mark,

It looks like some CSS in the child theme is making that text visible when it is normally hidden. You can add the following CSS to re-hide that text:

.featured-image > a {
  font-size: 0 !important;
}

Hi Ben,

Thank you so much, that’s worked perfectly.

Unfortunately I’ve just come accross another problem. The feature imaged appears blurry, only on and ipad/medium device though. Not sure where to start…. any ideas?

Thanks

Hi Ben, me again.

Also, is there a simple way to change the featured image height?

Cheers

Hello,
This code should do the trick.

.featured-image {
padding-bottom: 30%;
}

Thanks.