[Resolved] Same Floating Menu & Main Menu

[Ahamed]

Hi,

The floating menu looks better than the main menu.
I would like the main menu to look like the floating menu.
How do i do that?

http://upsizema.nextmp.net/

Regards

[Richard Bland]

Good Morning Ahamed,

Thank you for getting in touch with us.

Am I right in saying that you would like to change the height of the main menu to match the height of the floating (sticky) menu?

Please could you confirm your request and I will be happy to assist you with this.

Thank you

[Ahamed]

Hi,

I prefer the style of the “floating/sticky menu” in general.
Be it, desktop view, tablet view or mobile view.

So, how can i easily make the usual header look exactly like the “floating/sticky” menu?

Regards
Sha

[Ahamed]

[IMG]http://i66.tinypic.com/ehasrt.png[/IMG]

[IMG]http://i66.tinypic.com/16bx40l.png[/IMG]

Please see the images above. you will realize the sticky menu functions and looks better.

is there a easy way to ensure usual menu looks like sticky menu without any changes?

[Richard Bland]

Hello,

We can achieve this look through the use of some custom CSS, and some options within customiser, mainly reducing the height of the logo and the padding within the site header container.

Change Header Bar Size

We can remove the padding from the top and bottom of the header by following these steps;

Go to Customiser > Layout > Header

Now change the ‘Header Padding’ settings to Padding Top: 0 and Padding Bottom: 0

Logo CSS

Next we have to tell the logo to reduce in size to match the sticky logo. We will also need to add some padding and margin to match what the sticky logo was.

Add this custom CSS:

.site-logo img {
    height: 40px;
    padding-top: 10px;
    margin-right: 10px;
}
.sticky-logo {
    padding-top: 0;
    margin-right: 0;
}

That should do it.

Any issues please do let me know, update your site and let me see how you get on.

Thanks Kindly

[Ahamed]

Hi,

added the custom css using simple css plugin.

changed the padding in customizer.

this is what i got,
http://upsizema.nextmp.net/

as you can see – not perfect.

– sticky menu is now messed up.
– mobile usual header still unchanged.
– sticky header stretches to full width when the width is reduced. that’s good. and usual menu should do that as well.

any idea?

[Tom]

That’s looking pretty close.

The site logo spacing in the sticky menu can be fixed by adjusting Richard’s CSS from:

.site-logo img {
height: 40px;
padding-top: 10px;
margin-right: 10px;
}
.sticky-logo {
padding-top: 0;
margin-right: 0;
}

To:

.main-navigation:not(.navigation-clone) .site-logo img {
    height: 40px;
    padding-top: 10px;
    margin-right: 10px;
}
.main-navigation:not(.navigation-clone) .sticky-logo {
    padding-top: 0;
    margin-right: 0;
}

On mobile, you can use the Mobile Header option in “Layout > Header” to make everything on one line.

Alternatively to all of this, you can just hide the header and use the navigation as your header.

.site-header {
    display: none;
}

In “Customize > Layout > Primary Navigation, set your sticky effect to “None” and make sure your navigation logo position is set to “Sticky + Static”.

That way we’re not trying to clone an element, we’re just using the same element so they’re identical 🙂

[Ahamed]

Hi,

I took this approach,

Alternatively to all of this, you can just hide the header and use the navigation as your header.

.site-header {
display: none;
}

In “Customize > Layout > Primary Navigation, set your sticky effect to “None” and make sure your navigation logo position is set to “Sticky + Static”.

But there is no header now.

Did I miss any step?

In “Customize > Layout > Primary Navigation, set your sticky effect to “None” and make sure your navigation logo position is set to “Sticky + Static”.

When i set the sticky effect to none.
the sticky menu won’t appear.
When i set it to FADE or SLIDE, it appears when scrolled down.
When set to none, no header – even if i scrolled down.

Regards

[Tom]

Make sure your navigation position (Layout > Primary Navigation) is set to Below or above the header. If it’s floating right, it’s inside the header and will be hidden with that CSS.

Sorry, forgot to mention that 🙂

[Ahamed]

thank you very much. now it is done.

[Tom]

You’re welcome 🙂

[Author]

Posts