Header Navigation Menu Adjustment

Shapely
1

Good Day!

I have a lot of menu on my header, and my problem is my menu and logo doesn’t look proportion.

Please see attached image

Thankyou

2

anyone can help please :frowning:

3

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect the menu and test some possible solutions?

Best Regards,
Support

4

Here you go https://www.hdprodmcc.ae/.

Please help thankyou

5

Any news ?
Url: https://www.hdprodmcc.ae/

Update: here’s my additional CSS Code


/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

/*HEADER*/

/*MENU*/
nav#site-navigation {
    background: black;
    border: 0;
}

.wg-drop.country-selector{
	background-color: transparent;
}
.wg-drop.country-selector a{
	color: white;
}

#menu li a{
    color: #fff;
    font-family: Meiryo;
		font-size: 16px;
}

/*SUB MENU*/

#menu ul{
	background: transparent;
}

/*Change active and hover color*/
.dropdown-menu>.active>a {
    background-color: #000 !important;
    color: #855aa5 !important;
}
.dropdown-menu a:hover{
   background-color: transparent !important;
    color: red !important;
}

/*Increase logo size*/

.logo {
   	max-height: 150px	;	
		width:  150px;
	
}

/*Button color*/
.image-bg .btn.btn-filled {
    background: red;
    border-color: red;
}

/*Features*/
#shapely_home_features-3 h3 {
background-color: black;
color: #fff;
font-family: Meiryo ;
font-size: 48px;
}

#shapely_home_features-3 h4 {

color: #fff;
font-family: Meiryo ;
font-size: 21px;
}

i.fa {
    color: #f24b4b !important;

}

#services h5:hover, #services i.fa:hover {
color: #035359 !important;
}

/*Parallax*/

#shapely_home_parallax-9 h3{
	color: white;
}

/*Testimonial*/

#shapely_home_testimonial-3 h3 {
	color: black;
}

#shapely_home_testimonial-3 p {
	color: black;
}

#shapely_home_testimonial-3 strong {
	color: black;
}
#shapely_home_testimonial-3 flex-next {
	color: black;
}

/*Partners*/

#shapely_home_clients-3 {
	background-color: white !important;
}

/*HEADER CALLOUT */

.post-type-423 .header-callout {
display: none !Important;
}

/*Footer Credibility*/
#sfwa_credential-2{
text-align: center;
}
6

Hello there,

I hope you are doing well today.

You can use the following CSS code to shift the menu to the left by going to Appearance > Customize > Additional CSS and pasting it there.

/*Shift menu to the left*/
.nav-bar .module-group {
    float: left;
}

Best Regards,
Support

7

Hello,

Thanks for this workaround, But after applying this workaround my navigation menu is not scrolling on mobile phone.
On desktop view it’s fine.

Thanks.

8

Hello there,

Please try the following CSS code to fix the menu:

/*Navigation menu*/
nav#site-navigation {
    z-index: 20;
    position: fixed;
}

Best Regards,
Support

9

Thank You!!! :slight_smile:

10

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support