[Resolved] Same Floating Menu & Main Menu

Home Forums Support [Resolved] Same Floating Menu & Main Menu

Home Forums Support Same Floating Menu & Main Menu

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #249140
    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

    #249143
    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

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #249198
    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

    #249201
    Ahamed

    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?

    #249206
    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

    Kind Regards,

    Richard Bland
    Owner, BhambraBland
    --
    w: www.bhambrabland.co.uk
    e: richard@bhambrabland.co.uk
    --

    #249213
    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?

    #249239
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #249247
    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

    #249249
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #249256
    Ahamed

    thank you very much. now it is done.

    #249263
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.