How can I center the header menu on my Dawn theme website?

[epoll24]

How can I center my header menu (not including the logo)? My website is pulsedevice.com and it uses the Dawn theme.

[PageFly-Victor]

Hi @epoll24 !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation;

Please paste this code at the bottom of base.css under assets in theme code files

.header–middle-left {
position: relative!important;
left: 166px!important;
}

.header__heading-logo {
position: relative!important;
right: 197px!important;
}

You can also change px as you want.

Like this;

Best Regards;

Pagefly

[epoll24]

Hi PageFly,

After I did this, the search option and cart icons starting going off the screen. Any way to make this not happen?

[KetanKumar]

@epoll24

please confirm this look

[epoll24]

Yes, that is what it looked like. I had to remove the code from PageFly though because our mobile website navigation got messed up from that code. I’ve attached a picture.

[PageFly-Victor]

Hi @epoll24 !

Bro you can change px according to your screen in this code;

Please paste at the end of base.css;

.header__icon–cart {

position: relative!important;

right: 2px!important;

}

.header__icon .icon {

position: relative!important;

right: 12px!important;

}

This code is for both of icons only cart and search

[epoll24]

This messed up my mobile navigation. I have attached a picture. How do I fix this? I have temporarily removed the other code.

[PageFly-Victor]

Hi @epoll24 !

Bro you can use @media screen and (max-width: 749px) and paste the code after it you can change px value it will not affect desktop view thanks

[PageFly-Victor]

Hi @epoll24 !

Paste this code for mobie view at the bottom of base.css

@media screen and (max-width: 749px) {

.header {
display: grid;
grid-template-areas: ‘left-icon heading icons’;
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
}

}