Menu and logo in the middle

[andi]

Hi

I love your template, but i have a little problem and need help.

Normally the menu is on the left side (see attachment 1). But i would like to have the menu in the middle, and also the logo in the middle of the menu (see attachment 2).

I installed the plugin “Menu Image”. With this plugin it’s possible to put the logo in the middle of the menu. But now, also is on the left side, it looks like (see attachment 3)

I know, how i can put the menu (with the logo) to the right side (see attachment 4). But, i would like the menu (with the logo in the middle) in center of the page.

It is possible to have a resolution to make all in the middle, like the attachment 2?

For information: I work with the child theme…

Greetings

Andi

[Veena]

Pls share a link to your site, we will take a look.

[andi]

This reply has been marked as private.

[Veena]

Pls include the below custom CSS in themeoptions –

#primary-menu {
padding: 0;
position: relative;
display: block;
float: none;
}
.dropdown-menu-wrap ul {
position: relative;
left: 50%;
float: left;
}
.dropdown-menu-wrap ul li {
position: relative;
left: -50%;
float: left;
}
#header.sticky #site-logo, #header.sticky #primary-menu {
top: 0;
display: block;
}

[andi]

Thanks for your Code. Now, the Menu is in the middle, that’s perfect 🙂

But, the under-menu is now on the left side. Sea Attachment.

I tried it itself, but unfortunately it does not work 🙁

Can you look again, what’s the problem?

Thank you very much.

[Veena]

Pls try the below custom CSS in themeoptions –

.dropdown-menu-wrap ul.sub-menu > li:hover > a {
background: #c0442f;
width: 140px;
position: relative;
color: #fff;
left: 50%;
float: left;
}
.dropdown-menu-wrap ul.sub-menu li a {
position: relative;
left: 50%;
float: left;
}
.dropdown-menu-wrap ul.sub-menu li:hover, .dropdown-menu-wrap ul.sub-menu li.sfHover {
background: transparent;
}
.dropdown-menu-wrap ul.sub-menu li:hover > ul.sub-menu {
left: 270px;
}

[andi]

Perfectly phoenix.

Now I have finally just 1 important problem and 1 small problem.

The important problem is: If you scroll down, the menu is after on the left side. But, it must bee also in the middle. You know a resolution for that? (see attachment for that)

The smaller problem is: The Logo in the middle is a little bit too low. You know a resolution for put the logo a little bit upstars?

Thank you so much.

[Veena]

Pls add the below custom CSS in themeoptions –

#header.sticky #site-logo, #header.sticky #primary-menu {
display: block !important;
}
#primary-menu {
top: 15px;
}

[andi]

This reply has been marked as private.

[Veena]

I am not seeing any issue there in the header, everything seems fine. Hope you have managed it.

[andi]

This reply has been marked as private.

[andi]

This reply has been marked as private.

[Veena]

Pls include the below custom CSS in themeoptions –

.woocommerce-site #primary-menu {
  margin-right: 0;
}

[Author]

Posts