Hanging Logo

Support
#1

Howdy, you guys have been great with support so far. I searched and couldn’t find any open threads on this matter.

I want my logo to be a hanging logo - similar to the logo on DurrHC.com

Before I switched to X theme, WP gave me the below custom CSS, and it gave the result of: https://cld.wthms.co/KazCqr

Any way I can re-achieve this? Site info in secure note.

/* Site Logo: move it next to the menu on larger screens – 1570141-zen (EZ) /
@media screen and (min-width: 1260px) {
/ Add the new logo next to the header menu /
.menu-custom-main-menu-container:before {
content:"";
background: url(https://circleematerials.files.wordpress.com/2018/10/cropped-circle-e-logo_-0024.png?w=304) center left no-repeat;
background-size: contain;
position: absolute;
left: 0;
height: 133px;
width: 100px;
}
/ Move the menu to the left */
.menu-custom-main-menu-container {
padding-left: 100px;
}

/* Hide the original logo */
.site-logo {
display: none;
}
}

#2

Hi Kacie,

Thanks for writing in! Could you please try adding the following example CSS rule into your X -> Theme Options -> CSS area and then adjust it according to your requirement.

.x-brand.img {
    position: absolute;
    top: 15px;
}

Hope that helps.

#3

Thank you! It works, however, only if I remove the CSS that I was using to change the background color of my footer

.x-colophon.bottom {
background-color: #112233;

It will not work unless I remove this code - but I’d really like for my footer to be that dark blue color. Thoughts on how to have both work?

**EDIT
I think it may work if I use the hanging logo in the global CSS and the footer color coding on the specific page CSS. Can you look at my page and assure that it is okay the way I have it now?

#4

Hi Kacie,

Can you please add your CSS rule into your global CSS area to see the issue. Currently I don’t see any issue.

Also please copy all of your global CSS rules into an online tool like CSS Lint (http://csslint.net/) and see if you’re getting any CSS errors. If you see any errors, you need to correct them, so it will parse correctly.

Thanks!

#5

Thank you - I re added them both to global and for some reason it works properly. I may entered it in wrong the first time - not sure. Thanks though, it looks great.

#6

Hey there - need some additional help actually. I have my top bar enabled and would like the background color to be #112233 to match the navbar/footer, and the text to be white and centered.

#7

Hey Kacie,

You can add the following code as well in the Theme Options > CSS:

.x-topbar {
    background-color: #112233;
}
.x-topbar-inner {
    display: flex;
    justify-content: space-between;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#9

Hi Kacie,

It seems that you have deleted your recent post.

Please let us know in case you have a question.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.