[JoshuaParticipant]

Hi guys!

I am attempting to have the company logo on a site “hang” out of the navigation and overlap with the body content.

Here is an example of what I want it to look like:
https://makaunui.com/shop/

As you can tell though, the buttons right at the top are unclickable.

Also, it does not work on ever single other page on the site:

https://makaunui.com/makau-nui-hand-carved-traditional-polynesian-artwork/
https://makaunui.com/tradition/

It does work on the home page, but I think that is because I have the nav-wrap completely hidden:

https://makaunui.com

Any suggestions on how I can get this to work?

Thank you!!

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-navbar-inner .x-container.max.width {
    height: 145px;
}

Hope this helps – thanks!

[JoshuaParticipant]

Unfortunately that didn’t do the trick. Still working at it though.

Any other suggestions?

[JoshuaParticipant]

This one is really perplexing me.

I have removed your code, along with some of my other code in hopes that you might be able to find another solution.

The goal is to have the bottom portion of the logo hanging out into the content.

Thanks again for the support!

FYI Here is the custom code currently in place:

.x-navbar {
background-color: rgba(19, 9, 6, 0.3);
border-bottom: none;
}

.masthead {
background-image: url(https://makaunui.com/wp-content/uploads/2016/03/Makau-Nui-Inspired-by-Nature-2.jpg);
background-position: left center;
width: 100%;
}

.desktop .sub-menu {
     background-color: rgb(26, 26, 26);
}

[ZeshanMember]

Hi Joshua,

Please try this CSS code instead:

@media only screen and (min-width: 980px) {
  .x-navbar-inner {
      height: 145px;
  }

  .x-brand {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Thank you!

[JoshuaParticipant]

It worked! Thank you!

You have free me to go to bed!

Cheers!!

[LelyModerator]

You’re welcome Joshua!

Always,
X

[Author]

Posts