Topic: Want this layout for menu navi + logo

Anonymous
November 21, 2024 at 10:22 pm

hi
how are you

the current is https://tinyurl.com/23l8amsg

but the final look I want is https://prnt.sc/4MIkulfd0akX

1. move search box to the right
2. how to move logo to left before the whole navi menu? i have tried many times to adjust them and I failed, thanks
Alvind
November 21, 2024 at 11:09 pm

To move the logo to the left, go to Customize > Layout > Header and set the Header Presets to Default.

To fix the search box issue, I need to check your Customizer CSS section, but the credentials you provided in your other topic are incorrect, so I cannot log in to inspect.
Anonymous
November 22, 2024 at 12:59 am

hi

To move the logo to the left, go to Customize > Layout > Header and set the Header Presets to Default.

done as u told me https://tinyurl.com/26v3gno5, but it is not good, please check the website menu

To fix the search box issue, I need to check your Customizer CSS section, but the credentials you provided in your other topic are incorrect, so I cannot log in to inspect.

i will check it and send you soon

David

November 22, 2024 at 5:48 am

Hi there,

in Customizer > Additional CSS , remove the following CSS:


 /* Site title*/
.site-branding-container {
	flex-direction: column;
}
.site-branding-container .site-logo {
	margin-bottom: 0.7em;
}

 /* Menu bar */
.main-navigation .inside-navigation {
	justify-content: space-between;
}

.inside-navigation .main-nav {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}
@media (min-width: 921px) {
	.inside-navigation .main-nav {
		position: absolute;
	}
	.main-navigation .inside-navigation {
		margin-left: 5%;
		margin-right: 5%;
	}
}

Then in the Customiser > Layout > Header check the Navigation as Header option.
Once thats done let me know, and I can advise on spacing of the nav menu and items

Anonymous
November 22, 2024 at 11:24 pm

HI David

All are done with your steps,

I have to say that every journey is perfect under your guide.

Yes, as you said, give me your advice on spacing of the nav menu and items
I think this one is better for nav menu space like this https://tinyurl.com/29bfndhk

Looking forward to your reply , David

Thanks
Anonymous
November 23, 2024 at 12:20 am

Hi david,

Still need to add the background color to two menu items of ” resources” and ” get a quote” like this example https://tinyurl.com/2c2qt5u4?

David

November 24, 2024 at 12:07 pm

Ok.
1. adjust the spacing add this CSS:


#site-navigation .inside-navigation {
    justify-content: center;
}
#site-navigation .navigation-branding {
    margin-right: 10px;
}

2. to set the background colors of the last 2 menu items:


/* style one from last menu item */
#site-navigation .main-nav > ul > li:nth-last-child(2) a {
    background-color: #f00;
    color: #fff;
}
#site-navigation .main-nav > ul > li:nth-last-child(2):hover a {
    background-color: #00f;
}
/* style last menu item */
#site-navigation .main-nav > ul > li:last-child a {
    background-color: #0f0;
    color: #fff;
}
#site-navigation .main-nav > ul > li:last-child:hover a {
    background-color: #0ff;
}

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Want this layout for menu navi + logo