Pro: Header Builder Menu Design

Hi there,

I would like to build my menu similar to this one: https://www.christchurch-harbour-hotel.co.uk/
But I am having a hard time to get the submenu items aligned vertically in one row.
If not really necessary I don’t want to use the mega-menu builder for this.

Thanks in advance

Maik

Hello There,

Thanks for posting in! The example url is using a highly customized menu. You can only have something like this using Ubermenu. You can install by going to X > Overview > Extensions. To know more about uberMenu and how we have integrated it in the theme, please check this out:

Hope this helps.

@RueNel Thank you very much for your response.
I was hoping to realize this all without uber/megamenu… but i am not a css savy
I thought to have read somewhere that ubermenu and pro is not 100% compatibel with each other…?

Thanks again,

Maik

Hi Maik,

It is compatible, just make sure you’re using the latest compatible version.

Version Compatibility

Cheers!

1 Like

thank you guys very much.
I rebuilt the header now in uber-menu. It is looking not bad. But I have a little issue left which I can’t seem to solve by myself.
I will show it on screenshots to explain.

What I want to reach is basically that the logo is and stays in the middle. And the other objects should row up with similar spacing.
But when I change the screen size to be smaller (980px or smaller) the following happens:

and

i would prefer if the “big space” beside the logo would shrink according to the screen size. So there would be enough space to show the whole menu in one row.

Thank you for looking at this!!! You are awesome!!

Best regards

HI there,

To be able to achieve the look you want you will need to add custom CSS code. That is outside of our support scope but we will do our best to give you the idea on how to implement the code. Please kindly add the CSS code below to Pro > Launch > Theme Options > CSS:

@media (min-width: 960px) {
	#ubermenu-nav-main-274-primary {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}

	#menu-item-3973 {
		width:  20%;
	}

	.ubermenu-main.ubermenu-sub-indicators .ubermenu-item-level-0.ubermenu-has-submenu-drop > .ubermenu-target:not(.ubermenu-noindicator) {
		padding-right:  20px;
	}
	.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target {
		padding-left: 2%;
		padding-right: 2%;
	}
}

@media (min-width: 1040px) {
	.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target {
		padding-left: 10px;
		padding-right: 10px;
	}
}

The code above shrinks the logo width a little bit, make the wrapper tag of the menu flex to be able to sit in the middle always and adjusts the padding between each element depending on the screen size to avoid wrapping.

Thank you.

1 Like

Hello Christopher!

Thank you very much. it looks so much better now.

But for some reason the responsive menu doesn’t show up on mobile now.
It shows the same menu as on dektop, and it is horizontally organized… so only one item is reachable.

that’s really strange… I have never seen like this before.
Thank you for looking at this!

Hi there,

I think the code I gave you caused the issue. I edited the code in my previous answer. Would you please kindly use the newly edited code?

I think the problem was that I displayed the wrapper element as a flexbox, but it should not be for the mobile mode, so I moved all the code to the min-width: 960 block so it will show whatever it was before in mobile devices.

Thank you.

1 Like

Thank you very much Christopher. It works much better now than before.

But I have still a few issues left until it is good to use.

  1. As you can see on the screenshot, there is a white line on the left and right side of my menu.
    I cannot get rid of the line. Also I would like to be the whole menu fullwidth and not transparent on the left and right side.
  2. and 3rd thing is that the logo should go up a bit and the text of the navigation should go down so that the text is approx. in one line. To compare I send you another Screenshot where the submenu is “under” the logo.
    Right now the bottom of the logo is covered by the submenu from “Koh Chang”


    when I play with the padding in the submenu-customizer than it effects the menu on mobile too, and there the big spacing looks not ok. Can I turn off the set paddings for mobile? And how to do this please?

Thank you for you effort in advance!

Best Regards and have a good day!

Hi there,

Unfortunately, we can not be of a more help as this goes deep into customization and we will not be able to give you more support regarding this.

We can only give the proper needed stuff for the 1st question:

.x-navbar {
	border-bottom: none;
}

.x-navbar .x-container.max.width,
.x-navbar .ubermenu-main {
	max-width: 100%;
}

For the rest, you will need to hire a developer to help you. You can ask for help in our users Facebook Group as there are many freelance developers that can be of a help.

I am sure you will understand that we did our best here to give you a head start on your customization but we will not be able to continue this and implement every bit of the customization for you.

Thank you for your understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.