Docs

[Trophias]

Hiya!

We are experimenting with different menu’s and seeing what would be the best fit for us. Below is a overview of each. We would want a Full width menu that goes across the entire page and autoscales with the different screen resolutions that also has a background image in it that scales with the different screen resolutions as well so it doesn’t get cut off or looks weird. Any suggestions would be most helpful!

Normal Menu:
– Has full page with, but I’m having trouble having a image in the background while scaling the site to different resolutions (or auto resizing it to fit all screen sizes/Browser window sizes) Is there a way to fix this?

Uber Menu:
– I can’t have it be the entire page with, seems to be contained within a container only and can’t go outside of that. Is there a way to fix this or does it support it with a custom css format?
– No Background Image support(maybe I’m wrong on that)

Superfly Menu:
– I wanted to test out some of the selections and different options this one has, but I am not able to save any changes. I checked with a few different topics on here and it seems to be about activating the license? If so, I am not able to input my email inthe !ACTIVATE area of the Settings.

Thank you in advance for the help on the menu part and getting Superfly menu access 🙂

Site is located at: http://www.imperium.sc/home
**Side Note: there is a redirect on the main part of the website, so /home will be the only way to view the homepage.

[Rue Nel]

Hello There,

Thanks for writing in!

1] With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Most of us wants to have a responsive background image but we do not want the image to get cut off. What we can recommend is that if there is a person on the image, you can separate the person from the background as another image and you can insert it in a column. The same thing goes if there is a text in the image. As soon as background image gets smaller, those texts will be harder to read. You can simply separate the image and the text by using a with text element and insert in a column.

2] You do not need to activate SuperFly Menu. We are the one who will be providing plugin updates. To better understand how we utilize this plugin, please check this out: https://community.theme.co/kb/integrated-plugins-superfly/

Hope this helps.

[Trophias]

Thanks for the reply!

I can see what you mean with the example above and can totally understand the difference about the different styles.

Now, for Uber Menu, which is the one we are leaning towards since it has a very nice layout and you can insert images and such within the menu itself, is it possible for it to react like the default menu and have it span the entire page? I tried playing around with it, but can’t seem to get it to work at all. I’m really hoping that it just isn’t contained within a container and thats it.

(as a side note) I am not good with code at all (at best, I can read it) so I have put some custom css within the customizer to get the menu how it is now.

As for Superfly, I’ve looked over that guide, but I’m not sure why it’s not saving any of the options I select or the features I put on. I have it installed and activated, but the menu isn’t appearing on the site.

[Trophias]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! To get the menu in fullwidth span of the page, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .x-container.max.width {
    width: 98%;
    max-width: 100%;
}

.masthead-stacked .desktop .x-nav {
    width: 100%;
}

.x-navbar .desktop .x-nav>li {
    display: table-cell;
    float: none;
}

Hope this would work out for you.

[Trophias]

Awesome! This does work very well and I’ve gotten it to adjust to where we can start customizing the menu!

One more question if I may, Does UberMenu offer background image support? (I know it supports menu item images ) but what about the actual background of the main bar and submenu bar?

[Paul R]

Hi,

Please refer to the link below.

Submenu Background Image

Hope that helps.

[Trophias]

Hi Paul,

I totally understand the bit about the submenu background, and I’ve already been testing that feature. I was wondering about adding a background image to the main menu bar. Is this possible? (even with custom css)

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

nav#ubermenu-main-22-primary {
    background-color: transparent;
    background-image: url(http://www.imperium.sc/wp-content/uploads/2016/10/Layer-1-e1477036592469.png);
}

Hope that helps.

[Trophias]

Yes, it does! Thank you for all of the help!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts