Docs

[markwest]

Hi folks,

I’d really appreciate your help with a problem I’ve been struggling with for a couple of weeks now trying to fix it myself, without success 🙁

I’m trying to get a logo to appear on top of the nav bar – see attached image.

I’ve managed to get the layout to look right with the navbar set to ‘Stacked’ layout – but in doing so I end up moving x-logobar on top of the nav – which stops it working.

I am currently trying the ‘Inline’ layout, but now I can’t even see the brand image and can’t figure out what it’s hiding behind or why it’s not showing up.

The CSS I used when set to ‘Stacked’ is pasted below –
p {
font-size: 18px;
}

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

.x-brand img {
width: 200px;
}

.x-logobar {
text-align: left;
z-index: 99999;
}

.x-navbar {
margin-top: -132px;
}

.x-navbar-wrap {
padding-bottom: 0px;
}

.x-logobar-inner {
padding-bottom: 10px;
}

#ubermenu-nav-main-2-primary {
width: 1280px;
float: right;
}

#menu-item-17 {
border-right: 1px solid black;
}

.x-colophon.bottom {
padding: 0px;
}

I will provide login details for the site in a private message following.

Thanks in advance for your help.

Mark

[markwest]

This reply has been marked as private.

[Lely]

Hello Mark,

Please use the following custom CSS:

.hentry:first-child {
    margin-top: 67px;
}
a.x-brand.img {
    position: absolute;
    z-index: 999999;
    left: 133px;
    top: -29px;
}
.x-navbar {
    background-color: #2c3e50;
    margin-top: 27px;
}

Hope this helps.

[markwest]

Hi Lely,

Thank you very much, that has helped a lot.

I have modified the CSS you sent slightly to increase the logo size back to 200px and modified the various margins.

The only thing not quite right is that I would really like the left edge of the logo to be bound at the x-container width of 1280 rather than having a left margin. Is that possible please?

I currently have the break point of UberMenu set to 1240 – and this is now too narrow with the left margin on the logo required to keep it from the left hand side of the page . . .

I hope you are able to help me get this just right.

Thanks again.

Mark

[Joao]

Hi There,

Could you provide a mockup of what you are trying to achieve? Your logo looks well aligned now.

Thanks

[markwest]

Hi Joao,

I hope the attached image helps you.

I’d like the logo to line up (and stay lined up) with the left edge of the main 1280px wide content area.

At the moment the logo seems to be in a full width section with a left margin and this means that when the screen goes narrower the menu bar get covered by the logo.

If the logo was aligned with the left edge of the 1280px content area (with no left margin) then the break point I have set of 1240px will be correct. I would rather not increase the break point further.

So, in the image attached, the left hand side of the logo (short red line) should line up with the left edge of the 1280px content area (long red line).

Thanks very much.

Mark

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

.x-navbar .x-container.max {
    max-width: 1280px !important;
}
.x-navbar-inner {
    background: #313131 !important;
    min-height: 47px !important;
    border: 1px solid #000000;
    background-color: #3d3d3d;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #3d3d3d), color-stop(50%, #3d3d3d), color-stop(50%, #212121));
    background: -webkit-linear-gradient(top, #3d3d3d, #212121);
    background: -moz-linear-gradient(top, #3d3d3d, #212121);
    background: -ms-linear-gradient(top, #3d3d3d, #212121);
    background: -o-linear-gradient(top, #3d3d3d, #212121);
    -webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.1);
    -moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.1);
    box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.1);
}

Let us know how this goes!

[markwest]

Hi Nabeel,

Thank you so much for this help. I had to do something similar on another site (add the full width menu bar background manually) – but this is a much more elegant solution for doing that.

It’s nearly there 🙂 Just a couple more tweaks I think.

I’d like to get rid of the black border surrounding the 1280px width nav bar please – see image attached – border is marked with the red arrow.

I’ve also noticed that there is a problem with the mobile nav. The dropdown menu seems to be full width still. Ideally I’d like the mobile drop down menu to also be 1280px max and the menu options to be aligned to the right of the 1280px section – so they are not underneath the logo on the left.
Thank you again for your help so far and I hope you can help me get this finished up.

Kind Regards

Mark

[Paul R]

Hi Mark,

You can add this under Custom > Edit Global CSS in the Customizer.

.ubermenu-skin-black-white-2 {
    border:0;
    background:transparent;
    box-shadow:none;
}

@media screen and (max-width: 1240px) {
.ubermenu-responsive .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target {
    text-align:right;
}
}

Hope that helps

[markwest]

Hi Paul,

That’s awesome, thanks very much to you all for the constantly excellent support.

Kind Regards

Mark

[Joao]

You are welcome Mark!

[Author]

Posts