Please Help Me Make Top Menu Sticky

Hello,

I am using a child theme of Newsanchor.

I love the theme, but please tell me what code line should I write in the “functions.php” of the child, in order to make the top black menu sticky? (And also to make it float over all elements in the site as I scroll down - because some solutions make the sticky menu go underneath the site’s Carrousel images, when scrolling)

I am referring to the menu named “bottom-header” - the one that also includes the “search” field.

Thanks a bunch if you could help me out! I apologize for not having any idea how to code.

Hi,

You don’t need to add any code in functions.php, please post a link to your website instead, so I can give you a working CSS solution for this issue.

Kind Regards,
Csaba

Hello and thanks for the reply,

Let’s please use the Newsanchor demo site. http://demo.athemes.com/newsanchor/

What I am looking for is to make the primary menu stick on top of the page when I scroll - i think this is called fixed navigation bar (I refer only to the black menu with the multicolored mouse-over buttons + together with the grey-colored lateral sides of this menu). I would like these elements to stick on top of the page and to stay “in front” of all site elements when scrolling down the page.

I use a Newsanchor Child Theme.
Thank you!

Hi,

You can make that menu to be fixed ( sticky ), but it must be on top using this Custom CSS:

.bottom-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hello,

First I want to thank you for this code. This code indeed makes the menu sticky.

However, what this code also does, is that it snaps the menu on top of the page from the very beginning, over the top part of the header and over the site logo included in the header making it unusable with the Newsanchor design.

I wanted this menu to stay in it’s standard location and to become sticky once the page reaches its location upon scrolling. A good example of such a menu is on this site: https://sousvideguy.com/

But the code you suggested snaps the menu directly on top and it’s not what I want.

So, is there any way to make this menu sticky like in the example-site i have provided, using CSS that I can add in my Child Theme’s style.css?

Thanks again for all the help!

Hi,

Unfortunately that can’t be done with simple Custom CSS, that’s done with javascript, but there is a plugin which can do that too, please try this plugin and let me know how it works: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Kind Regards,
Csaba

Thank you for the suggestion.

I am already using that plugin. It has one issue - when the menu becomes sticky it also becomes unresponsive to different resolution formats. That’s why I was hoping it would be easier and simpler to implement the sticky functionality directly via code in the Newsanchor Child Theme. (I understand now that I was mistaken).

It seems this is not an easy option, so I will stick to the limited functionality of the plugin you have mentioned.

Thank you again for advising me and trying to help. I appreciate all the input! :slight_smile:

Have a wonderful day!

Hi,

Yes, it’s not an easy task and may not fit in the scope of support, you may need to hire a web-developer to implement that functionality via code. If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba