Float 50% of the logo

Support
#1

Hi,
I would like some help with the inline menu. I would like the logo on the left to float 50% over the slide show/hero image area.

#2

Hello @Temujiin,

Thanks for writing in!

You can achieve that by adding new custom CSS codes. I am sharing few resources that will help you get started.

https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/css_margin.asp
https://www.w3schools.com/css/css_float.asp
https://www.w3schools.com/css/css_padding.asp

Along with that I would suggest you to use Google chrome dev tools that will help you to make the changes more swiftly.

Thanks.

#3

Hi,
Thanks for the much needed help.
I used this code below in the custom css but instead of lowering only the logo to float,
it lowered the entire menu inline plus the logo.What can I do to just float the logo

display:block;
position:absolute;
z-index:50;
height:100%;
}

#4

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#5

Hi Thai, thank you for getting back to me.
I inserted the link of the website in the secure note box in my first post.

#6

Hi again,

Thank your providing the URL. Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

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

Hope this helps!

#7

Thanks alot, it works! Sorry for asking too much but would it be possible to only have it on desktop and not mobile?

#8

That would require custom media query. You need to put your CSS inside a media query. Please see https://www.w3schools.com/css/css_rwd_mediaqueries.asp for more details. If your unsure how to use it, please consult with a web developer.

Thanks.

#9

Thanks, I found a way today to make it responsive.
I really appreciate all the support you guys provided!

#10

You’re welcome! :slight_smile:

#11

Hi – I am looking for the same option for my client – where the logo floats half and half such as in this site – http://www.thefarmerandthechef.com/. Is the code you mention below the only code added for that to happen? PLMK

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

#12

Hi @charliemca,

Thanks for writing around! The above code should do the trick, you probably need to adjust only top: 27px; in the code as per your need. If that doesn’t work then you can try out the following code:

.x-brand img {
    position: absolute;
    top: 27px;
    max-width: 200px;
    left: 3%;
    z-index: 10;
}

Hope this helps!

#13

Thank you for responding so quickly – I for got to ask, will this affect my logo if centered? Or do I need the code altered for that? Sorry for the questions – I am not a developer. Thanks Charlie

#14

Hi @charliemca,

Please provide us with your website URL so we can take a closer look.

Thanks.

#15

I would but I havent built in online yet. I am wanting to build the look in the site that we are talking about. As long as I can do the center and half floating then I will ask you again as soon as the build starts if thats ok. plmk Thanks Charlie

#16

Hi Charlie,

It would be tricky to provide a custom code suggestion as your setup might be different from the original poster of the thread.

Kindly try to have your test site uploaded online so that we could check and provide you some suggestions.

Thank you.