[Resolved] Menu Transparency & Sections Link

[Cristina]

Hi!

I have GP Premium, and I would like to do some things that I don’t know how to do it.

1) I would like to have the main menu transparent, so it would be integrated within the page header. Can I do that?

2) My home page is divided in sections, and I want to link each item of the menu with each section, not to other pages. Is it possible?

And finally, I don’t find where I can put a text with a shortcode for a subscription form inside the page header, could you guide me?

Thank you very much, your work is amazing. I am really happy to have bought it 🙂

[Cristina]

(I have to add that I want to have the same page header in every page and blog post.. so I don’t find that possibility, only doing it one by one)

[Cristina]

Sorry, I saw that you answered other people but not me.. Did I ask something that I shouldn’t? Sorry if that’s the case 🙁

[Tom]

Hi there,

Definitely not! I just had a baby and am answering questions on my iPad in the hospital room – these are just tough questions to answer without my computer, but I’ll try!

1. This might help: https://generatepress.com/forums/topic/integrate-main-menu-into-page-header/#post-167188

2. Would you have different menu items for the other pages?

You can link to sections like this: https://generatepress.com/forums/topic/one-pager/#post-155986

Then if you only want specific menu items on specific pages, this plugin may help: https://wordpress.org/plugins/if-menu/

Let me know 🙂

[Cristina]

Wow! Congratulations! My best wishes!

You were so helpful, thank you very much!

After that, what I want to link also is from one of the items of the menu (which is above the header) to the secondary navigation (which is below the header), and from another item of the menu to the footer, but I don’t know where can I add that <a name> (or even if it’s possible, maybe not).

I tried as well with a regular section, but because of the sticky menu, I see it like in the middle of it, because the top is behind the sticky menu. What can I do?

I am not in a rush, take your time to answer me, enjoy the baby!

Thanks again 🙂

[Tom]

Thank you! 🙂

So you’re wanting a menu item which jumps you down to those other menus?

You can jump to the secondary navigation using this ID: #secondary-navigation

The menu in the footer depends on if it has an ID or not.

To fix the sticky menu issue, this should help: https://generatepress.com/forums/topic/creating-or-changing-the-section-ids/#post-137518

[Tom]

Thank you! 🙂

So you’re wanting a menu item which jumps you down to those other menus?

You can jump to the secondary navigation using this ID: #secondary-navigation

The menu in the footer depends on if it has an ID or not.

To fix the sticky menu issue, this should help: https://generatepress.com/forums/topic/creating-or-changing-the-section-ids/#post-137518

[Cristina]

Thank you so so much!!!

I have another problem, and two more questions.

The problem is that on mobile, the logo is not automatically resized, so the dropdown menu and the search are below it, making the navigation bar too big. I tried changing the size of the logo, but it didn’t work.

The two questions are about design, because I don’t know where can I edit it, or even it’s possible.

I want to edit the design of the dropdown menu (of the main navigation and secondary navigation) that appears on mobile phone more or less as in this website: http://www.javierbarros.com.

An also, as you can see as well in that web, he has a header in every post and page with a photo that looks good too on mobile, and a text with a form. If I use a photo as a background image and set a spacing, I get a blank space under the image on mobile (I think because of the spacing), and I don’t know how can I fix that or if I have to do what I want in another way. And can you tell me where I have to put the text and the form?

I am asking a lot and I feel bad, so I paid you a few coffees. Thank you very much for your great support and help.

[Tom]

Hi there,

Thank you for the coffees!

Okay, first – can you link me to your site so I can see what’s going on with your logo on mobile?

What about the dropdown menu on that site are you wanting to use? How it slides down?

What are you using to add your page header with the background image? It should be set to cover the entire area regardless of desktop or mobile, so there shouldn’t be any white areas. A link would definitely be helpful 🙂

[Cristina]

Hi!

Here’s the link: http://bit.ly/1Xag2Ui

That’s how the navigation and the header looks like on mobile device: http://bit.ly/1Pr6j6O

For the header, I uploaded an image in “Background Images > Header”, and then I’ve changed the pixels in “Element Spacing > Header > Bottom” to see the photo, because if not, I only can see a piece of it.

What I want to change in the dropdown menu is the way you see the “links”, it opens below the icon of the dropdown and the links are aligned in the center.

And the text and the form of the header, where can I put them?

I’m so so grateful you’re helping me, I really appreciate it 🙂

[Tom]

You can reduce the width of your logo on mobile with this CSS:

@media (max-width: 768px) {
    .main-navigation .sticky-logo, 
    .main-navigation .sticky-logo img {
        max-width: 200px;
        height: auto;
        margin-top: 3px;
    }
}

For your header background, set the Background Size option (in the area where you uploaded the image) to “Cover”.

So you don’t want the slideout menu, you want the default mobile menu?

Currently, that’s not possible when your mobile menu is floating to the right. I’m working on a fix for that 🙂

[Cristina]

Thank you so so much Tom!!!

You have been so helpful! Have a good day 🙂

[Tom]

You’re welcome! You as well 🙂

[Author]

Posts