Fixed custom menu (section/row content band)

Is it possible to make a custome menu that fixes to the top of the page when scrolling? I’m trying to develop custom portfolio pages to highlight different jobs and I don’t the normal menu (as I can’t seem to put an image above it) So I’m trying to make a custom menu, but I want to fix to the top of the page like my homepage. Any suggestions? Thanks! http://www.boyersconstruction.com/test-portfolio-link/ this is the page I’m working on.

I want the menu on the above page to act like the menu on this page. http://www.boyersconstruction.com/portfolio/

Thanks!

Hi Levi,

Thank you for writing in, please remove that first section with an image banner and custom menu, have your standard header instead.

Make that image banner as a Revolution Slider instead, you can install Revolution Slider extension under X > Validation > Extensions.

Make a simple slider with that image as a background of the slider.

Slider Revolution WordPress 5.x Documentation

After you created the slider, assign that slider as the Featured Slider Above Masthead on your custom portfolio page.

You will have now a header that has a banner image above the menu bar and logo bar.

Here’s where the magic happens, please add this to Theme Options > CSS

/*hide the logo bar*/
.page-id-790 .x-logobar {display: none !important;}

/*make the menu bar transprent*/
.page-id-790 .x-navbar {background-color: transparent !important;}

/*overlap the slider and menubar*/
.page-id-790 .x-navbar-wrap {
	margin-top: -45px;
}

45px is the height of your menu bar,

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

.page-id-790 is the ID of the page. You might use a different page, so you need to replace that ID #.

How To Locate Post/Page IDs

Let us know how it goes,
Cheers!

Super helpful!!! Thanks so much for this!

You are most welcome. :slight_smile:

So not sure if my css code did this, but on mobile, my hamburger menu won’t open and drop down the page options? Any suggestions? Thanks!

Hi,

The css code shouldn’t affect the mobile button toggle but you can try removing it to test.

Please check for the following too

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. If you’re using a caching plugin, clear all caches including browser cache then deactivate your caching plugin and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

  5. Try to remove custom CSS, Javascript and templates.

Thanks.

My x theme just needed updated. Thanks!

Hello @stuckeylevi,

Thanks for updating the thread.

I suggest you to copy the site to a staging server and test the theme update over there. In case any issue comes up same can be looked at without affecting the live website.

You can take a look at following article to setup staging site.

https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

To update X Theme please take a look at following resources:

  1. Theme Update guide: Please take a look at following article to update Theme.


2. Please take a look at following doc about changelog:

https://theme.co/changelog/

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.