How to center site logo?

Site URL: https://dirtyrubbers.com/

Hey everyone,

I recently added some custom CSS to my site to change the normal navigation menu on desktop to a hamburger one (along with some other modifications), and since then my site's logo on desktop has been off-center.

This is all the code I have added that's related to my navigation menu & header:

/*Decrease nav menu items margin on desktop*/
@media screen and (min-width:768px){

.header-menu-nav-item a {margin-top: 2vw; margin-bottom: 2vw;}}

/*Change nav menu to hamburger*/
@media screen and (max-width: 5000px) { 
	
.header .header-burger {display: flex; order: 0 !important;}

.header--menu-open .header-menu {opacity: 1; visibility:visible;}

.header-actions--left {visibility:hidden;}

.header .header-title-nav-wrapper .header-nav {display: none;}}

/*Nav Menu Font Size*/
.header-menu-nav-item a {font-size: 25px !important;}

Any help will be appreciated!

Hi,

Could you try:

@media screen and (min-width:768px) {
.header .header-announcement-bar-wrapper {padding-left:0vh!important;
}
}

On 3/10/2021 at 9:34 PM, ErikaT said:

Hi,

Could you try:

@media screen and (min-width:768px) {
.header .header-announcement-bar-wrapper {padding-left:0vh!important;
}
}

Thanks for your message Erika!

In the first pic attached you'll see how the header looks before inserting the code, and in the second one how it looks after.

Though your code does successfully center my header text/logo, it also moves my hamburger menu icon to the far left, which is certainly not ideal. 

On top of that, the header text/logo position remains unchanged once I open the hamburger menu (third pic attached).
 

Ah interesting in the dev tools it showed the open menu padding fixed as well. That being the case the below may not work once you click the hamburger but worth a try, replace the code I mentioned with:

@media screen and (min-width:1025px) {
.header-title-text {padding-right:4vh!important;}

It works in chrome devtools, but so did the other one!

Interestingly your title-text is correctly aligned until you hit 1025 pixels. Anything above that and its wrong, anything below that and its fine, as per 2 screenshots below (first is 1025px, second is 1024px). Hopefully code above will fix. If not I'd need to test using the css manually, as headers can take quite a bit of tweaking. I know mine took me some time to get all the correct settings.

Things just got even more interesting Erika 😂

Your code above works just fine at first (when the hamburger menu is closed), but once I reload the page or click to get directed to another page I get this:

So, essentially, the hamburger menu disappears altogether on desktop.

On 3/13/2021 at 11:55 AM, Sotiris said:

Things just got even more interesting Erika 😂

Your code above works just fine at first (when the hamburger menu is closed), but once I reload the page or click to get directed to another page I get this:

So, essentially, the hamburger menu disappears altogether on desktop.

I just re-added your last code and everything seems to be working fine now.

As long as the hamburger menu is closed, then the site's title is centered.