logo in the center with two side menus in gk box

230972gabriella

hello, at the request of the customer I need to insert the company logo in the center of the navigation menu, as seen in the photo. How can it be done? (photo1)
I would also like to completely eliminate the dark or colored part that is under the header that contains the image and make sure that the space is occupied by the image itself. I am attaching a photo to make it clear ...(photo 2)

photo 1
photo 2

saguaros

Hi 230972gabriella

On desktop, you mean the logo will show in the middle of menu items?

For mobile, you can try this custom css:

@media (max-width: 992px) {
#gkLogo {
    margin-left: 10rem;
    margin-top: 5rem;
}
}

230972gabriella

hello yes, now the logo has lowered to mobile. However, I would like the height of the nav bar to be much smaller (as in photo1), and on the desktop the logo was in the center with the menu items that are divided, three on the left and three on the right or in any case that can be shared on two side menus, as you see (photo2) with the smaller nav bar in height. Also I would like to remove the dark color that appears under the photo on mobile and tablet devices and fill that space from the photo itself ...
You can see how it should be going on the website www.dolciariafalcone.com
foto 1
foto 2

saguaros

230972gabriella

To reduce the height of the header on mobile, you can try this:

@media (max-width: 992px) {
#gkHeaderNav { 
height: 90px !important;
}
}

and adjust to your desired value.

About centering the logo on desktop view, I'm afraid that there is no setting for it right now. You have to customize it by using JS + CSS to achieve that.

230972gabriella

hello sorry, the logo in the center, on mobile, I can put it easily but I don't need it. It is the structure of the navigation bar that I would have liked to change by placing the logo in the center and two side menus on the desktop. i understand that you should edit the template, not the css. I leave it like this so as not to waste time now.

If you can please help me instead, as I have already asked you, with the dark background that appears under the photo, both on mobile and on tablet. Since it can't be deleted, can you help me change color?
The same thing with the sandwich menu which remains white or I can only change the color of two horizontal bars.

For both of them I would like to use this color # 978577

Thank you@saguaros#146679

saguaros

230972gabriella with the dark background that appears under the photo, both on mobile and on tablet

Could you share screenshot of that photo? I don't see the dark background now.

230972gabriella

saguaros

230972gabriella

You can try with this custom css:

@media (max-width: 840px){
.gkHeaderContent {
    background: #978577 !important;
    position: static !important;
}}

230972gabriella

hi, I tried this code yesterday. only works for mobile and tablet. on desktop it looks bad. try it yourself and check thanks

saguaros

230972gabriella It seems that you used the wrong code, I updated as my above reply and it's working now.

On desktop, I don't see it has background color now, if you want to apply for desktop also, you can remove the media query and just use:

.gkHeaderContent {
    background: #978577 !important;
    position: static !important;
}

230972gabriella

adesso è ok grazie mille 🙂

saguaros

230972gabriella My pleasure!