Logo link center

Support
#1

Hey,

I have positioned my logo center. But the logo link for home is still located on the left side.

How can I make the logo have the link to home again?

Thanks in advance!

#2

Hi There,

Thanks for writing in!

I can see your menu nav is overlapping the logo due to the position. Please replace the CSS that you have added for .x-brand.

.x-brand {
	width: 300px;
	margin: auto;
        text-align: center;
        float: none;
        z-index: 99999;
       position: relative;
}

Setup the uber menu similar to this CSS.

.ubermenu.ubermenu-main {
    background: none;
    border: none;
    box-shadow: none;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0px;
}

And add this CSS to your theme option CSS

ul.ubermenu-nav {
    max-width: 680px;
    margin: auto;
}

Hope this helps!

#3

Hey I tried this but the desired outcome was pretty off.

Check secure image.

I just want to be able to use the logo still as a link to home.

Thanks

Summary

Edit

I did manage to adjust some setting to get it closer. BUt not the ubermenu is not inline and also the logo link spans the whole menu. How can I adjust the px for the logo link?

Summary

Thanks

#4

Hi There,

The menu is working fine with the setting and CSS.

I found one CSS closing mismatch in the code, after removing this it woring fine.

Please have a look.

Thanks

#5

Hi,

I managed to get it into the middle but the logo link is either not working or if I use z-index: 99999 it works but covers the ubermenu.

Is it the same for you?

#6

Have you tried this CSS ?

.x-brand {
width: 300px;
margin: auto;
  text-align: center;
  float: none;
  z-index: 99999;
  position: relative;
  border: none !important;
}


ul#ubermenu-nav-main-63-primary {
    max-width: 680px !important;
    top: 1px;
    margin: auto;
}

.ubermenu.ubermenu-main {
    background: none;
    border: none;
    box-shadow: none;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0px;
    max-width: 100% !important;
}

Seems you are not using my CSS. Any way you can go with your own way with help of a developer if possible. Because any custom code is out of our theme support scope.

Thanks for understanding!

#7

I tried your css but it didnt work. See Image I shown. Then I tried fixing it myself with my limited knowledge

#8

What you have written is okey,
Just change the width of the x-brand,

.x-brand {
width: 300px;
margin: auto;
text-align: center;
float: none;
z-index: 99999;
position: relative;
border: none !important;
}

instead of 100% make it 300px;

I can’t help beyond this sorry !

#9

Please check it working fine now!

Thanks

#10

Hey,

Thanks for your help.

I shall try that also.

Have a good day

#11

Wow!! I saw you did it for me! Thanks very much! It works great now