UberMenu - alignment

[vojtechzikmund]

Hello there,

I’m trying to solve my UberMenu together. Along the given instructions here and here:
https://sevenspark.com/docs/ubermenu-3/settings/submenu/position

I’m not able to work things out with the Pro Header…

See secure note for further information.

[albrecht]

Hi @vojtechzikmund,

Here’s a solution to set the submenu to full-width.

1. Give the container of the menu an ID. Here are some screenshots to help you locate the ID field.

2. Add this custom css to make the container static so the sub-menu will expand to next relative container. In the screenshot I used the uber-container ID, use the one you set on the first step.

#uber-container {
    position: static;
}

To give the submenu a space from the top, you need to add a top margin to it. Here’s a custom css that should do that. In this css I’m using the ID and class given by the ubermenu, so you need to use the same code below.

#ubermenu-nav-main-3-primary .ubermenu-submenu {
    margin-top: 26px;
}

Hope it helps. Thanks!

[vojtechzikmund]

Thank you very much! Worked as it should.

Although, I still have some questions, because I’m not sure what overrides what in UberMenu, it is so chaotic…

1. How do I make the items (columns) to align to the middle like on the website I provided?
2. I set minimum height of the submenu, but everything aligns to the top not to the centre, how do I fix that?
3. Is it possible to add alt image on hover to the submenu images? Or give them some hover style, e.g. zoom, push forward, etc.?
4. I had set up an underline hover on the menu. I have tried some codes from this forum, but with no luck, I think they are not valid anymore. How can I add it to the menu?

[ruenel]

Hello @vojtechzikmund,

Thanks for updating in!

1.) To make the items (columns) to align to the middle like on the website, please change the horizontal flex layout to “start”.

2.) The minimum height of the submenu can be set in Appearance > Menus, edit your menu by using the UberMenu settings.

You can check the documentation here: https://sevenspark.com/docs/ubermenu-3/settings/submenu

3.) Yes, you can. You can go to Media > Library, find your image and then supply the alt and the title description.

4.) The underline hover on the menu can be enabled/disabled in Appearance > UberMenu > Main UberMenu Configuration > Style Customizations > Normal Items Underline on Hover

Hope this helps. Please let us know how it goes.

[vojtechzikmund]

Thank you for your reply! I was not successful with few points though. What am I doing wrong? I think something is overriding my settings.

1.) I have set the horizontal flex layout to “start”, but nothing has happened. Any idea?

2.) I have my minimum height set to 330px and it works, but it does align the content to the top making there a gap (padding) on bottom, see – https://i.imgur.com/KJGdgfg.png

3.) Thank you! Works.

4.) There was a misunderstanding as this works for submenu items, but what I was after is an underline for top level items in the menu?

5.) Also, even though I have set up everywhere to align the menu (top level) items to the right, it still does show a gap on the right aligning itself to the centre of the container… solution? see – https://i.imgur.com/Tj8odNC.png

Thank you in advance for taking a look at this

[lely]

Hi @vojtechzikmund,

@vojtechzikmund

1.) I have set the horizontal flex layout to “start”, but nothing has happened. Any idea?

We’re sorry for the confusion, to align elements in the middle in relation to it’s container, please Center instead. Make sure you also have set Flex Basis See this:https://screencast-o-matic.com/watch/cqjQiyONMl

@vojtechzikmund

2.) I have my minimum height set to 330px and it works, but it does align the content to the top making there a gap (padding) on bottom, see – https://i.imgur.com/KJGdgfg.png

330px minimum height is too much, please decrease the value. Until bottom space is acceptable for you. Maybe around 220px.

@vojtechzikmund

4.) There was a misunderstanding as this works for submenu items, but what I was after is an underline for top level items in the menu?

That will fall to custom CSS: https://sevenspark.com/docs/ubermenu-3/customize/css-tweaks

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Try this: ``` .ubermenu .ubermenu-item.ubermenu-item-level-0 > a > span { border-bottom: 1px solid red; /*Change red to your preferred color*/ }

[quote="vojtechzikmund, post:5, topic:62360"]
5.) Also, even though I have set up everywhere to align the menu (top level) items to the right, it still does show a gap on the right aligning itself to the centre of the container... solution? see – https://i.imgur.com/Tj8odNC.png
[/quote]

It is aligned to the right already. What you are seeing is the default padding on main menu links: https://screencast-o-matic.com/watch/cqjQiRONLB

.ubermenu .ubermenu-item.ubermenu-item-level-0:last-of-type>a {
padding-right: 0;
}

Hope this helps.

[vojtechzikmund]

Thank you for updating this!

1.) Sorted out.

2.) Sorted out.

4.) Okay, this does add an underline, but how do I tweak the code to make it just for the hover? I used to have this code in Pro header:

$el.x-menu > li > .x-anchor .x-anchor-text-primary {
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
padding-bottom: 5px;
}

$el.x-menu > li > .x-anchor:hover .x-anchor-text-primary {
text-decoration: none;
border-color: #000;
}

Possible to mimic similar one to the ubermenu?

5.) Sorted out.

NEW POINT - 6.) Would it be possible to add a hover transition to the submenu items?

EDIT – 7.) I have found out that after choosing the trigger for UberMenu the “Click” instead of “Hover” that the menu item stays highlighted in this weird way, see – https://i.imgur.com/0t7hjsD.png How do I get rid of that? I tried looking at several browsers and it shows everywhere…

[ruenel]

Hello @vojtechzikmund,

4.) You can make use of this custom css:

.ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-target {
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    padding-bottom: 5px;
}

.ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-target:hover {
    text-decoration: none;
    border-color: #000;
}

6.) Yes, it may be possible. Please add sub menu items so that we can test it.

7.) To remove the outline, please make use of this code:

.ubermenu .ubermenu-item {
    outline: none !important;
}

Please let us know how it goes.

[vojtechzikmund]

@RueNel thank you for the update!

4.) That worked! Is it possible to set a width to the border-bottom, though? Something like 50% of it’s current width would do.

6.) I have a submenu items. It’s a submenu of menu item called “produkty”

7.) Seems glitchy. I do see it after clicking on the menu item and then leaving with the mouse. See – https://i.imgur.com/sXc0pnG.png

[ruenel]

Hello @vojtechzikmund,

4.) You can update the code and use this:

 .ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-target {
    transition: all 0.3s ease;
    border-bottom: 4px solid transparent;
    padding-bottom: 5px;
}

.ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-target:hover {
    text-decoration: none;
    border-color: #000;
}

6.) You can make use of this custom css:

.ubermenu-submenu > .ubermenu-item > .ubermenu-target span{
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    padding-bottom: 5px;
}

.ubermenu-submenu >.ubermenu-item > .ubermenu-target:hover span{
    text-decoration: none;
    border-color: #000;
}

7.) And please update the code into this one:

.ubermenu .ubermenu-item,
.ubermenu .ubermenu-item:focus {
    outline: none !important;
}

We would love to know if this has worked for you. Thank you.

[vojtechzikmund]

@RueNel thank you for the update!

4.) and 6.) it all work flawlessly, but can we make the underline in both little narrow? It’s width is now all the way to the edges. Adding a padding from both sides or something like that?

7.) I dunno if it’s just me going crazy, or my browser, but I still do see the outline after leaving the header when clicked.

[christian]

Hey @vojtechzikmund,

4.) and 6.) Add display: inline-block; to this selector .ubermenu-submenu > .ubermenu-item > .ubermenu-target span that was provided previously. That will restrict the underline to the length of the text.

If you wish to do that for the parent menu, add the .ubermenu-target-title class to these previously given selectors:
.ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-target
.ubermenu-skin-minimal.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-target:hover

7.) Here’s the correct selector or code to remove the outline.

.ubermenu-target:focus {
    outline: none !important;
}

As you can see, we have provided some custotm CSS help here which we do not normally do. Please ensure it’s properly followed because if you introduce a syntax error, it won’t work. Please also take this as a learning opportunity and try to tweak things in UberMenu on your own. It is not feasible for us custom code continually especially troubleshooting custom code issues and further enhancing them.

Hope that helps.