Menu not centered

[dosolutions]

I am sure it is something I have done, or not done. I did check center menu, but it is not…

I would like to center the menu on this site.

Home

Also in mobile view I would like to show the logo centered at the top between the hamburger and search icons.

Any suggestions welcome.

-Daniel

[scrambler]

For the centering, I am not sure where it comes from, but there is custom CSS doing that (rule below)

.is-menu-desktop .wvrx-center-menu {margin-left:180px;display:block;}

Check all your custom CSS, but if you dont find where it comes from to delete/override it, you can add the one below in the Theme Global Custom CSS Rule box

.is-menu-desktop .wvrx-center-menu {margin-left:0 !important;display:inline-block !important;}

Regarding the logo on mobile there is a lot of custom CSS going on….

First the logo is not visible because of a rule
.is-mobile .menu-primary .custom-logo-on-menu img {visibility:hidden;}

So that would first have to go

Then you can add the rules below to the theme global custom CSS rule box.
If you have existing custom CSS rules with the same selector and property but a different value, you can just change them in your rule.

.menu-primary .custom-logo-on-menu img {display:inline-block !important;}
.menu-primary .custom-logo-on-menu {
margin: 0;
text-align: center;
width: 80%;
display: inline-block;
}

If it does not work, leave these rules in place and post back so we can see what needs changing

The empty space below can be reduced with
@media screen and (max-width: 767px) {.is-menu-default .wvrx-menu-container {padding-bottom:0}}

[dosolutions]

OK, I now have the menu text centered, thanks – but when I scroll, then it is aligned left not full width.

I now also have the logo displayed correctly on mobile view, but would like to only see that logo (fade in) on scroll, since it is also in the header image.

And yes I would like less space below the hamburger menu on mobile, it seems to grow on scroll.

This did not seem to do anything.

@media screen and (max-width: 767px) {.is-menu-default .wvrx-menu-container {padding-bottom:0}}

[scrambler]

Try to set the menu to Align: full, so it does not shrink

I will look at the rest tomorrow

[scrambler]

Actually I meant to use the following alignment option for the menu

Align > Align Full Items center

 

[scrambler]

Regarding animating the opacity of the logo image when the menu fixes, this is explained in a guide article below

“Fixed to Top on Scroll” Menus: Customization – Weaver Xtreme Guide

In your case that would translate to the following rules

/* Rule to set the transition speed for logo opacity */
.wvrx-menu-container .custom-logo-on-menu img {
transition: opacity .5s ease;
}

/* Rule to set the image opacity before and after the menu fixes */
.is-mobile .wvrx-menu-container .custom-logo-on-menu img {opacity:1;}
.is-mobile .wvrx-menu-container.wvrx-fixonscroll .custom-logo-on-menu img {opacity:0}

 

[scrambler]

Regarding the space, you need to crop the logo image to remove all the white under the image itself.

If that is not enough, you could add the rule below, but negative margin can be unreliable, so the above is to be done first

.menu-primary .custom-logo-on-menu {margin-bottom:-10px;}

 

 

[User]

As  to Scrambler’s comment, the “sm-logo-trans-1.png” logo image has a clear background, but that background  area needs to be cut to about zero.

At the moment, the bottom 30% of the image comprises just clear background and that is causing your white space the issue.

[dosolutions]

Yep, align full / items centered.

thanks

[dosolutions]

This reply has been accepted as the best answer.

OK I trimmed the image.

I like that it is actually larger – so the image size in mobile view in the menu area is controlled by some setting…

Now in mobile view when I scroll the logo vanishes. I would like it to appear on scroll. Do I have the opacity logic incorrectly set?

Why yes… that was it.

/* Rule to set the image opacity before and after the menu fixes */
.is-mobile .wvrx-menu-container .custom-logo-on-menu img {opacity:0;}

.is-mobile .wvrx-menu-container.wvrx-fixonscroll .custom-logo-on-menu img {opacity:1}

 

Thanks everyone!

[scrambler]

There is a setting for the size of the logo image on menu in the theme settings.

 

[Author]

Posts