How to change position of logo based on a preset theme

Hi @itsdesign0518 ,

It looks like you solved your spacer issue. Congrats. I replied a few days ago after I was able to see your site. But, I think my reply was deleted for some reason.

Anyway. Can you be more specific on what position you want to change your logo to?

Have you already consulted your theme’s documentation/author/forum? I’m sure you aren’t the first person to ask this question for your theme?

Or, if you know CSS, you can play with the logo’s margins/paddings. And, since it’s wrapped in a flexbox, you can learn how to position the logo using flexbox position rules.

Here’s a quick example of moving your logo to the left a “little” bit.

.hcode-header-logo.header-logo {
    margin-left: 10rem;
}

BTW, it looks like you are using a premium theme?

https://themeforest.net/item/hcode-responsive-multipurpose-wordpress-theme/14561695

You should use their support processes. The theme providers are the best people to answer your question. And, www.ads-software.com is not equipped to support premium (paid) themes.

I hope that makes sense ??

Good luck!

@mlchaves Hey Mark, thanks for following up! My old post was moved by the WP administrator so I cannot reply you via the old post. Yes I think the spacer problem was kinda solved. Still adjusting it.
The logo position I want to change is the top left logo that are current on the very edge. I would like to make it a bit to the right. I searched the theme CSS and it shows:

.navbar.shrink-nav.static-sticky .hcode-header-logo > .logo-light { display: inline-block; }
I have no idea how to change the inline-block.

I will try your code and try to reach out the theme support.

Thanks!!

OK. Then, the CSS I gave you should help.

To override a CSS rule that you don’t have access to or you don’t want to change the original source you can:

1. Add the !important declaration. E.g.,

.some-class {
  display: flex !important;
}

or,

2. Manipulate with JavaScript. E.g.,

let elt = document.querySelector(".some-class");

elt.setAttribute("style", 
                 "display: grid; place-items: center;");