Topic: Menu problems

brightestmedia
April 19, 2023 at 4:29 am

Hi,

I have two problems with the menu and I can’t deal with them.

My website – https://localwebsite.brightestmedia.com.pl/

1. I have a secondary menu and it works fine on desktop and tablet, but on mobile devices a hamburger icon and the word “MENU” appears, which requires expanding this menu.

I would like the secondary menu to be expanded all the time and be in one line.

Currently it looks like this – https://prnt.sc/PCAPtm5l9OW-

I would like all the icons from the secondary menu to be visible immediately as it is on desktop and tablet – https://prnt.sc/7M9kmqGA96Wp

On mobile I would like 3 icons to be visible at once instead of the hamburger menu. Or if there is such a possibility, maybe to have the logo moved to the left and the icons on the right side. On the other hand, I do not insist on the latter option and it is enough that the icons appear below the logotype. https://prnt.sc/sE1MgFdX_dz5

2. I would like the homepage icon in the main menu to appear on the left side, because it currently looks like this – https://prnt.sc/N6eR5edF6Hmm

The effect I would like to get – https://prnt.sc/c6Cfxmi_JrdE

I got the effect I showed in the above screenshot by adding a relative position and moving it to the left by 120px but it is not responsive.

Maybe you have a hook that will allow me to nest this icon before:
<div class=”inside-navigation grid-container”>

I’m wondering if I can achieve this effect if I move this menu item to the very front and have this item on the left side and the rest of the navigation in the middle and have it look good on all devices when the browser width changes.

David

April 19, 2023 at 5:52 am

Hi there,

ok:

1. don’t use the Secondary Navigation for the social icons so remove that nav.

remove that and then we can discuss how to add it in a better way.

2. add this CSS:

@media(min-width: 1024px) {
    .main-nav {
        flex: 1;
        padding-right: 15px;
    }
    .main-navigation .main-nav > ul > li:first-child,
    .main-navigation .main-nav > ul > li:last-child {
        margin-right: auto;
    }
    .main-navigation .main-nav > ul > li:first-child {
        padding-left: 15px;
    }
}

brightestmedia
April 19, 2023 at 7:38 am

Hi David,

Thank you for your quick response.

1. I disabled the second navigation. What do you suggest in this case? I would like to put 3 icons in that place what you saw and more precisely:
– Facebook
– Twitter
– Search icon

2. Thank you, it works very well.
David
April 20, 2023 at 1:46 am

Ok.
In Appearance > Widgets –> Header Widget use a GB Buttons Block to construct your 3 icons.
This will appear in the same position as your current menu.

I assume you’re using the new modal search ( enabled in Customizer > Layout > Primary Navigation )

AS you can give your search button an Advanced > Attributes

data-attr: data-gpmodal-trigger value gp-search
brightestmedia
April 24, 2023 at 1:58 am

Hi David,

Thank you so much for helping me solve my problems. Everything meets my expectations 🙂
David
April 24, 2023 at 4:26 am

Glad to be of help!

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Menu problems