[Support request] Logo with height bigger than the site bar

[Marie Odile]

Hi,
I am rebuilding my website with wordpress. Before it was using a old version 2010 of Joomla.
You can see my first steps here : https://www.thefrenchcandle.com/ (no content or images yet)

I am trying to have the following homepage that will have :

Navigation menu + a big slider with 3-4 feature images (header?) + Content
What I want :
1.1) When loading the page (before any scroll) to have a transparent menu –> done
I used GP Premium header add-on and use : page header feature image, merge with header, add background image, parallax effect , fullscreen
1.2) Logo to be bigger than the height of the menu –> done, by just putting a logo image bigger than the menu once I merged header with navigation menu
1.3) The issue comes when I scroll down. The only think I want to happen it’s to make the navigation + logo not to be transparent and change some basic css like background colors. I tried to do some test using the sticky navigation desktop only: But the effect of sticky menu it’s not what I am looking for as its making it smaller both the bar and the logo, and the logo would be then inside the navigation menu div.

I want to have exactly the same menu (same placement and sizes for all the menu) but just being able to change transparency, colors etc etc. Any idea on how to achieve this with generatepress?

Finally I have two other questions :
– How to change my feature image into a slider of 3-4 images ? Do I need a plugin ? If yes, how should I do the linking between the feature image and the slider build with the plugin ? Can I use Elementor, or should I use a specific slide plugin like meta slider or ultimate slider? Any advice?

– How to make my feature image / slider to take 70% of the height of my screen. I want to make sure the user sees that there is interesting content below the slider and I don’t want to the slider or the feature image to take 100%

Thank you in advance,
Jesus

[Marie Odile]

Hi again,
Just to be more clear I want something similar to http://www.kerrybober.com/ with the differences that I want the navigation menu to be trasnparent at arrival and become opaque when scrolling down and I want to avoid the sticky effect where it makes smaller logo and navigation menu. I want to keep exactyly the same sized before and after scroll down, just change some basic css for colors and so on.

[Tom]

Hi there,

We’ll do this in a couple of steps..

1. Remove your logo from Customize > Site Identity.
2. Hide your header:

.site-header {
    display: none;
}

3. Add your logo to your navigation in Customize > Layout > Primary Navigation and set it to Static + Sticky.

4. Increase the height of your menu items in Customize > Layout > Primary Navigation.

5. Set your navigation to sticky with no transition.

Once you get there let me know and we’ll get your logo to overhang over the navigation 🙂

[Marie Odile]

Thanks a lot Tom!

I think I am where you wanted me to be.

I have few doubts :
First, In order to keep the code clean, if I am changing many times the type of menu, positions, then changes back again, would the code keep clean ? I had an issue where I remove from the UI the featured image from the page header add-on below the content page. However in the bottom of the right side bar there was also a feature image box that was still pointing to the old image (it didn’t delete automatically). This made my site break and I was still seeing the image but the menu items where no clickable. So I am wondering once I learn how to do things properly if I should delete the page and build it again.

Second, I am not sure what is the difference between adding custom CSS from the customizer, adding it at Appearance –> Custom CSS (it applies to all pages?) or using GeneratePress at the page level and use the disable header option. Which one should I use? So far I added using Appearance –> Custom CSS with Simple Custom CSS.

Third, I haven’t found yet how to change the style and colors of the menu items.

Finally just to make sure, I had to changed my navigation location to above header (before it was right) because when I was disabling my site-header my navigation menu was disappearing.

Please let me know how can I continue in order to make my logo overhang over the navigation.

Thanks a lot!!
Jesus

[Tom]

Changing options in the Customizer won’t make your code messy.

Not too sure what you mean about the featured images? I’d have to see the problem live on your website.

You can add CSS in “Customize > Additional CSS”, which is the core WordPress method. Or you can use my Simple CSS plugin, they’re both the same.

The menu items can be styled using the Colors add-on in Customize > Colors > Primary Navigation.

Now, to make your logo overhang over your menu, you can use this CSS:

.main-navigation .navigation-logo img {
    height: auto;
    position: absolute;
    left: 0;
}

However, you will need to align your navigation to the right (Customize > Layout > Primary Navigation > Navigation alignment), and probably decrease the menu item widths (in the same area).

If it’s still too crammed, you can increase your container width or set your inner navigation width to full.

[Marie Odile]

Hi Tom,

I was able to implement the changes. Thanks a lot!

Now I am ready for the second step, the slider! My understanding is that in order to have the logo overhanging the navigation bar we needed to hide the header. Therefore I need to create a slider but instead of using the header capabilities of GeneratePress I would need to do it through eider a plugin or Elementor which I am using.

I tried with Elementor and was able to achieve something , please check :https://www.thefrenchcandle.com
3 quick questions :
How can I make the sure the slider would start from the top of the page ?
How can I make the menu transparent only for the homepage and not for the rest of the pages ?
How can I define the height of the slider to be 3/4 of the my screen height so it still responsive and work on mobile devices ?

Thanks a lot!
Jesus

[Tom]

Hi Jesus,

First, you’ll want to do this so your logo appears above the slider:

.main-navigation:not(.navigation-stick) {
    position: relative;
    z-index: 99;
}

Then to make your nav transparent/sit on top of the slider only on specific pages, this might help: https://docs.generatepress.com/article/merging-header-navigation-content/

[Marie Odile]

Hi Tom,
Thanks a lot!
As I said to Leo somehow I Broke my website last week when adding polylang plugin so I started everything again. After few discussions we decided not to make the navigation menu for https://www.thefrenchcandle.com
However the issue we face is that the logo position on high resolution screens like 1800px width is too far from the left side part of the content so when I scroll down it goes on top of the content.

I have the impression taht the navigation bar by default is centered and what I would like is to have :
1) Logo on the left side part of screen
2) Navigation more on the right side part. Please be aware that I will put 4-5 languages (after all main menu items, please check this ticket https://generatepress.com/forums/topic/placing-language-buttons-on-a-different-part-of-the-navigation-menu/#post-304004)

I want something similar to what you have on your support page where I am writting this ticket. Your LOGO on the left side, the menu on the right side.

Is this possible knowing that I have a static position and that I am using Elementor with a container size of 1140px ?
Thank you,
Jesus

[Tom]

The way you have it set up now seems very similar to this site?

However, if you want the logo to be further to the left, perhaps try changing the inner navigation width to full in Customize > Layout > Primary Navigation.

[Author]

Posts