Hiding nav bar on desktop moves logo

Site URL: https://www.ajpgroup.com

Hi, im having this issue where my header logo is moving to the left when i hide the navigation as i dont want it to display on desktop but i want it to display on the phone hamburger menu.

.header-nav {display: none;}

thats the code i used and i cant use visibilty hidden as the height of the header increases when i do that.

You need to share the password to be able to open up the site on here.

21 hours ago, noahawaii said:

You need to share the password to be able to open up the site on here.

site is public

can you try to explain that better. You want the header hidden on desktop or the nav menu. Because it looks like the nav menu is hidden and the site title looks centered.

4 minutes ago, noahawaii said:

can you try to explain that better. You want the header hidden on desktop or the nav menu. Because it looks like the nav menu is hidden and the site title looks centered.

the nav menu visibility is currently hidden using visibility:hidden . the problem is when i put more than 3 items in the navigation bar, the header height starts to increase and i dont want that to happen, when i use display:none , the navigation bar disappears,  the header height is fine but the logo moves to the left and is not centered anymore

11 hours ago, AJPerformance said:

the nav menu visibility is currently hidden using visibility:hidden . the problem is when i put more than 3 items in the navigation bar, the header height starts to increase and i dont want that to happen, when i use display:none , the navigation bar disappears,  the header height is fine but the logo moves to the left and is not centered anymore

Try this.

.header-layout-branding-center .header-title {
    flex: none !important;
}

.header-title-logo {
    width: 50% !important;
}

You can also set your header height to something specific

.header {

    height: XX px !important;

}

9 hours ago, noahawaii said:

Try this.

.header-layout-branding-center .header-title {
    flex: none !important;
}

.header-title-logo {
    width: 50% !important;
}

You can also set your header height to something specific

.header {

    height: XX px !important;

}

 

Hi, thanks, it fixed the height but the logo appears on the left side of the screen now, i want it to appear in the center, i also changed the nav to display:none

On 4/30/2022 at 11:41 AM, AJPerformance said:

Hi, thanks, it fixed the height but the logo appears on the left side of the screen now, i want it to appear in the center, i also changed the nav to display:none

It looks like you figured it out?

20 hours ago, tuanphan said:

It looks like you figured it out?

yeah figured it out, i just individually hid all the navigation buttons :)