Pro header menu layout

[markwest]

Hi,

I’m trying to create this header on Pro and I’m hitting a few bumps in the road - I’m hoping you can help me with them please? Please note this is my first attempt using Pro - and whilst I have read some tutorials and watched some videos I’m a little stuck.

First up, I’d like the submenu to appear below the top level nav horizontally, with the items all starting at the left hand side - so where ‘Reiki Courses’ is top level and ‘Reiki 1’ is the sub-menu. I’ve created a third bar for this sub-menu to appear in but I can’t figure out how to stop it being a dropdown and/or make it horizontal?

Second up, I’d like to change the line that appears under the menu item on hover to an upwards arrow effect like you can see under the top level ‘Reiki Courses’. Is this possible just with CSS?

Third and last up (for now) - please note I’m using a temporary logo - but I’d like it to sit above all the menu bars. I’ve tried adding a high z-index to the image element, but it still sits below the third menu bar.

Thanks very much for your help.

Mark

[ruenel]

Hello There,

Thanks for posting in!

1.) Regretfully the dropdown is always in vertical position. There is no option that you can arrange the sub menu items in a horizontal position.

2.) The effect that appears below the menu item when you hover it is the Particle option. Simply click the navigation inline and find it in the Menu > Top Links > Sub Indicator option.

Screenshot

3.) The z-index of the last bar should be less than the z index of the bar containing your image. The default z-index of the bars is 9999. By adjusting the z-index of the last bar into 9998 will resolve your issue.

Hope this helps.

[markwest]

Hi Rue,

Thank you for your suggestions. However, if the horizontal second level isn’t possible then I think I probably won’t be able to build this in Pro/Header builder

This is my first outing with Pro and to fall at the first hurdle so to speak is disappointing - especially given the build-up that the Header/Footer builders had.

Would there be a way to have the second level menus as seperate menus and trigger them in the second bar onclick/onhover on the first level menu items?

If this simply isn’t possible I would be grateful for your suggestions on how this might best be achieved - maybe ubermenu?

Thanks for your help.

Mark
P.S. It would be useful to know if there are plans to add this kind of functionality to header builder in the (near) future?

[christian]

Hey @markwest,

Regretfully, it’s not possible with the Navigation elements available in Pro. It is currently only available in UberMenu.

There’s currently no plans nor feature request for this type of sub-menu layout. I’ll post this as feature request.This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thanks.

[markwest]

Hi,

Thank you for this advice.

I have decided that I will not use the Pro theme, but rather X.

I have purchased an additional licence and uploaded the theme and child theme to my site and activated the child theme.

It seems like most of the options in Theme Customiser have been kept from Pro - however, in the Header section I see no options?

Please advise how to correctly/fully switch from Pro back to X and see all options?

Thanks

Mark

[christian]

Hey Mark,

There is no extra step for switching Pro to X. To avoid confusion as the original topic of this thread is about Pro header layout, would you mind opening a separate thread and give us access to your WordPress admin in a Secure Note and a screenshot of what you’re referring to or the issue? Also post a link to this thread for reference.

Thanks.

[markwest]

Hi Christian,

Sorry, but this whole situation is driving me nuts - it shouldn’t be this difficult!

I was able to rectify the situation (i.e. get the customiser to show the details within Header) by deleting the Pro and Pro-Child themes from the site. To re-iterate - with them in place, when you switch from Pro-Child to X-Child the Header section within theme customiser is empty. I don’t know if this is only the case when you’ve created a Pro header or not. It seems like maybe a bug to me?

Getting back on track I’m now trying to create this same header in X with Ubermenu and just butting up against one issue after another.

• I’ve got the logo centraland the menu item split left/right, but I can’t seem to get just the logo to sit above the nav bar
• how to create the hover particles/active icons
• how to get the second level bar to appear all the time - I think I will have to just style/add space for the second level items to appear in?

None of this stuff should be difficult - this shouldn’t be a difficult layout to produce - but it’s taken me literally days trying to get this to work with Pro and so far all day today with Ubermenu.

Sorry if my frustration is boiling over - but I just want to be working with a theme that allows me the flexibility to achieve result quickly and simply for my clients and right now I can’t do that.

If you are able to help me resolve these issues and get the header/logo/meny laid out as I’d like that would be awesome.

The login details are in a private message at the beginning of this ticket.

Thanks

Mark

[markwest]

P.S. to last reply. And, having logged out of the site and logged in again the Header customiser options have disappeared. Gah, this is beyond frustrating . . .

[markwest]

P.P.S -If I access via Appearance > Customise the options are there

[christian]

Hey Mark,

Sorry for the confusion regarding the blank header. I have replicated that issue in my test site and it’s because you need to switch to the original header first before switching. The solution would be to install and activate Pro again and go to Pro > Theme Options > Header and switch to Original Headers. When you switch back to X, your Header Options would be available. I submitted this to our issue tracker.

Regarding your menu layout, I understand the frustration. This is because you need some extra coding. It can be achieved following UberMenu’s instruction for centering a logo and with a bit of custom CSS to hide X’s logo on desktop and show it again on mobile. I’ve set this up in your site and recorded what I’ve done to show you that it is achievable. It’s not that straightforward though.

Your design is not that easy to achieve with any theme in the first place unless the theme covers the exact setup you need out of the box. In other theme’s you will completely need a developer to build you the exact layout complete with back-end options so that it’ll be easy for you and your client to manage.

But, with the system available in X, you just need a bit of custom code. Just note that custom coding is outside the scope of our support. What I’m doing here is just to guide you or give you a head start with the layout. The the rest of the design and functionality that would need custom code should be handled by you or a third party developer. UberMenu has lots of features though so it would be best to check their documentation first if what you need is available before contacting a developer.

Below is the screenshot of your header layout now:

Desktop

Mobile

Here’s the recording of the setup. If you find it fast, slow the playback down or pause and play to follow along. Sorry for the lack of audio. The screencast is not a tutorial but just setup demo.

Regarding the particles and active icons, this is not available in UberMenu. You’ll need to hire a third party developer to add this bit of style/functionality.

To get the second level bar to appear all the time, you can enable one of the Show submenu options.

Hope that helps and thank you for understanding.

[markwest]

Hi Christian,

Thanks you so much for your help, and sorry again for getting a little frustrated.

At least the issue with the Header options is now logged with you. I did as you suggested and re-added Pro and switched back to classic - that fixed it.

With regard to the menu - I have now got desktop about 99% there - I wonder if I could trouble you for one more hint with that please - I have the CSS for the hover/active triangle - but I can’t quite figure out the correct CSS to target the menu items to display the arrow central on the bottom border?

Also, I have one issue on the mobile menu - which is that the sub-menu items don’t seem to be expanding the menu - instead they overwrite the top level items below. I thought this may be the Ubermenu option I am using on the desktop version to force sub-menu’s open - but I have tested with that off and it’s still not working?

Thank you again for your help yesterday.
Kind Regards
Mark

[Alaa]

Hi Mark,

That would be the code needed for the hover triangle effect on Ubermenu:

.ubermenu-item-has-children > a:first-child:hover:after{
	content:"";
	height:0;
	width:0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #000;
	position:absolute;
	bottom:-1px;
	left:50%;
	margin:0 0 0 -10%;
	z-index:100;	
}

Regarding the submenu dropdown on mobile version, it seems that your custom CSS codes added in (X > Theme Options > CSS) or in (Appearance > Customizer) is causing this conflict, I recommend taking a backup of these codes first, then remove them one by one till you figure out which one is causing this issue. Also, I can see the codes are almost identical? you should add the code to one place only and I recommend (X > Theme Options > CSS).

Thanks.

[markwest]

Hi Alaa,

Thank you for your help.

For me those two CSS locations you mention are displaying the same CSS - if I delete it from one location it is also gone in the other? Likewise if I paste if back in to X > Theme Options > CSS is also appears in Appearance > Custom > Global CSS. Please advise if this is correct behaviour or you think something is wrong?

With regard to the mobile issue I realised that it was simply the background missing for the submenu - rather than pushing the lower menu items down Ubermenu’s default behaviour seems to be to display over the top. Adding a background colour to the submeny div fixed the issue - thank you.

Thank you for the CSS to display on hover. Please could you advise how to maintain the arrow on the active menu item?

Thanks for your assistance.

Kind Regards

Mark

[Alaa]

Hi Mark,

No, it’s not like that, there is no synchronization between both places, you just need to add custom CSS codes to (X > Theme Options > CSS) and delete it from the customizer.

And that’s the code needed for the active Ubermenu item:

.ubermenu-item-has-children.ubermenu-active > a:first-child:after {
    content: "";
    height: 0;
    width: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #682C84;
    position: absolute;
    bottom: -1px;
    left: 45%;
    margin: 0 0 0 0;
    z-index: 100;
}

Thanks.