[Support request] Tabbed menu with gradients

[Victor]

Hello GP,

I try to re-create and at the same time correct an ancient site for a Thai restaurant,

https://www.thaiflavours.nl is the original, live site and

https://dev.thaiflavours.nl is the ‘work in progress.

The original site still stems from the days with ‘pure’ HTML and CSS, and now I have no idea anymore how to exactly replicate the tabbed menu from the original.
That is, I’m not too familiar yet with the way GP targets several parts of the DOM. Is there something like a (brief) overview somewhere?

So, main thing I notice is, that I do not know how to get the ‘new’ tabbed menu sit as close to the page content as in the original?

Could you kindly have a look, and possibly help me out? I still have the original CSS, pasted it step by step in th Extra CSS part to see how went, but as to the tabbed browsing, I still do not fully understand.

Thank you very much!

Best regards, and happy 2023!

Victor van Dijk.

[Victor]

PS, please do disregard the HTTPS warnings if you can.
The dev site (without SSL certificate) WILL eventually be copied into the main domain (with SSL).

I hope you can trust me on this one, otherwise I’ll send some screenshots of the dev site 🙂

[David]

Hi there,

1. the space between the menu and content comes from the Customizer > Layout > Container –> Content Layout being set to Separate Containers.
It adds the defined separating space between them.

To just remove that top space you can add this CSS:

.separate-containers .site-main {
    margin-top: 0;
}

2. the Menu Items Height can be set in Customizer > Layout > Primary Navigation

3. try this CSS for the gradients:

/* base color styles */
.main-navigation .main-nav ul li a {
    display: block;
    color: #232622;
    background-color: #ccc;
    border-radius: .3em .3em 0 0;
    background-image: linear-gradient(180deg, rgba(204, 204, 204, 1.00) 0%, rgba(203, 203, 203, 1.00) 100%);
}
/* Current color styles */
.main-navigation .main-nav ul li.current-menu-item a,
.main-navigation .main-nav ul li.current-menu-item:hover a {
    background-color: #666;
    color: #fff;
    background-image: linear-gradient(180deg, rgba(84, 84, 84, 1.00) 0%, rgba(133, 133, 133, 1.00) 100%);
}
/* hover styles */
.main-navigation .main-nav ul li:hover a {
    background-color: #999;
    color: #232622;
    background-image: linear-gradient(180deg, rgba(145, 145, 145, 1.00) 0%, rgba(181, 181, 181, 1.00) 100%);
}

[Victor]

Hi David,

Thank you so much for your great input and solution! 😀

Step 1. and 3. really work well!

Just, I cannot find “Step 2. Menu Items Height” within the Customizer > Layout > Primary Navigation.

Further, I decided to ‘merge’ the footer with the rest of the page by selecting Customizer > Layout > Container and switching it to “Single Container”. I’m not 100% sure if this will turn out nicely with the tabbed menu structure, but I’ll see.
Now, I only have 2 items left,

1. I would like to have bottom right and bottom left 25px rounded edges in the footer – but I don’t know how to target the footer for that?

2. In the header, in the original, there was the text logo to the left, a Buddha image in the middle, and the flower image to the right – and, again, I don’t know how to re-make that? Is it also possible to make the mobile-phone layout as such, that this header layout stays WITH top right hamburger menu and all?

Thanks again for all the great help!

I guess that after the above, the website has been re-created the way I wanted it to be 🙂

Kind regards,

Victor.

[Victor]

I just noticed in the new re-make a ‘hickup’ in the site when ‘tabbing’ from Home to any other tab, driving me crazy….
It looks like the XY origin of the entire page is shifting, as well as (maybe) its width.

Is that just me in my own browser? Or do you experience that as well?

And then, what could cause such behavior, and of course, how could I solve that?

Thanks anew!

Victor.

[Fernando]

2a. With regards to the Menu Item Height, here’s an article you may refer to: https://docs.generatepress.com/article/menu-item-height-width/

1. Try adding this through Appearance > Customize > Additional CSS:

.site-footer.grid-container footer{
        border-radius: 0 0 25px 25px;
}

2. To clarify first, on mobile, do you want the Hamburger button, or do you want the header to look the same as it is on desktop?

3. What shifting are you referring to? Will you be able to take a screen recording of it? I can’t seem to replicate any shifting on my end. It may be a browser issue as you said.

[Victor]

Hi Fernando,

Thank you very much for your most helpful input!

I was unaware that I needed to flick a GP Premium switch to be able to ‘style gaps’ 🙂

Now the website remake approaches its final stages, I managed to get the (mobile) header almost the way I like, with both the header and the hamburger menu being displayed.

The only things missing in the header are the text to the left, and the image of the Buddha in the center, like in the old design at https://www.thaiflavours.nl .

Could you kindly help me out on that final one? After that, the website will be complete 😀

Thanks :-)!

Victor.

[Fernando]

I see. One approach is to use a Block Element – Site Header: https://docs.generatepress.com/article/block-element-site-header/

You can then create the Header Structure you want through GB Blocks.

Another approach is to use a Block Element – Hook. Hook it to before_header_content. You can then add the text and the image there.

But with this approach, we’ll need custom CSS to position it correctly.

[Victor]

…I just can’t thank you enough!
The renewed website will be hopefully online by the end of this day.

…my friend for whom I was doing it all would like to experience the mobile design on his phone without ‘hamburgermenu’ ,but just the regular tabbed menu instead. I remember having seen a simple ‘switch’ somewhere, but do not remember where…

So, it is possible (without ruining my mobile hamburger design) to just display the regular tabbed menu at the top of the page, isn’t it? Could you point me the way to ‘da switch’? 😀

Thanks!

Best regards,

Victor.

[David]

To disable the mobile menu, in Customizer > Layout > Primary Navigation you can set the Mobile Menu Breakpoint to 0.
But it may not work as expected, due to the limited room to show many menu items. Let us know.

[Victor]

Gazillion THANKS!!!

You can now admire the renewed website at https://thaiflavours.nl 😀

Very very chuffed with your help and input!!

Until next time 🙂

After your reply, I consider this case fully closed.

Best regards from Victor.

[David]

Glad to be of help 🙂

[Author]

Posts