Logo Overlap Region - CSS Update

Greetings WPMUdev!

In a previous post(s) I received support with overlapping an image element (logo) within Upfront. First on the Spirit theme, than transitioned over to the Parrot theme.

This was the code that was the result of the Parrot Theme transition that seemed to be just right and help up throughout new updates etc.

/* WPMU DEV support */
.header-logo.upfront-output-image.upfront-image {height: 0;}
body.upfront #module-1468180393559-1847 {height: 0;}
.upfront #module-1468180393559-1847 #image-1468180393552-1211 {height: -90px; margin-top: 0px;}

/* ADAM WPMU Menu logo fix */
#upfront-region-container-desktop-navigation,
#upfront-region-container-desktop-navigation .upfront-region-container-bg {
  height: 67px;
}

If I recall right Adam Czajczyk was the one who added that last bit. I would bring this up on the previous thread, though I'm not certain which thread that was.

I'm looking to add this same feature to a theme built with Builder and have that feature be applied to new sites built with that theme along side Upfront.

Hope you guys can help with this one. Hopefully all that is needed is a few element ID modifications.

This is a screenshot of what was done previously on moor.tamanasprings.com

I'm looking to add this now on the "Spring-Line" theme via builder and have that applied to TamanaSprings.com via the updated Builder Theme.

  • Ciro Bey

    EDIT: I may have solved this. I hadn't really looked at the code before. In the second half of the code given (above) I hadn't realized the region's names were different/updated. I changed them to the new region name and seems to have worked. I also added the code to the theme via global CSS within Builder and that applied over to the site with the theme.

    I only used the second half of the code. Seeing that it's working, would the first half be needed or could I discard that?

    Also I added the code in the Global CSS for the theme. Could I add this code to the logo element itself to keep things tidy, or perhaps the region css would be better?

    Much Love,
    Ciro Bey

  • Luís

    Hi Ciro Bey ,

    Hope you're doing well today!

    Right, each module and image have your own ID, a specific code, so, if you add a new element or try replicate the same procedure in other theme you will need to check it and update.

    I only used the second half of the code. Seeing that it's working, would the first half be needed or could I discard that?

    Start from the begining that the code works, I think you don't need to change anything more. Also, I tried to update the code to the use the new "module" and "image" ID's, but it didn't had any effect. However, I will ping Adam just to make sure that I didn't missed anything.

    Also I added the code in the Global CSS for the theme. Could I add this code to the logo element itself to keep things tidy, or perhaps the region css would be better?

    Yes, you can add this to the element "Custom CSS". In this particular case, and if I am not missing something, it will work on both places, so, it's a matter on where you prefer to use it.

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.