Team

Solutions

Work

Blog

Engage

Team

Solutions

Work

Blog

Engage

Create different menu styles simultaneously with the Uncode theme

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Here's a creative idea to liven up your website design: utilize an overlay menu style for your homepage and a standard horizontal menu for the inner pages of your site. With some help from Content Block and CSS let’s see what we’ll need to make it happen.

A menu like this can add a very nice touch to your website design. In this article, we will not go in-depth when it comes to designing it. We’ll leave that part to you and your creativity. Our plan is to offer functional solutions. You’ll be able to realize this by following these steps:

  1. Set the overlay menu through Theme Options
  2. Create a menu for your site’s inner pages by using Content Block
  3. Connect Content Block with your pages
  4. Control the visibility of these elements with CSS or from Page options

Set the overlay menu through Theme Options

We start by setting up an overlay menu from Theme Options that will be utilized for the homepage. To do this, go to the WordPress Dashboard and navigate to Uncode -> Theme Options:

In Theme Options, go to Navbar settings and expand the Menu tab. You will be able to see all of the available options related to how you can display your website menus. The Uncode theme supports horizontal, vertical, and overlay menus. The style you choose here will be used for all website pages, posts, etc. Currently, there are no options available to set different menu styles for different pages or content types. To make this possible you will need to apply custom coding in Uncode theme or use a workaround that you’ll learn about in this article.

We set menu options to overlay menus with a hamburger icon positioned on the right side (Menu Horizontal Position option). Menu items can be aligned in the middle, vertically, and center-aligned horizontally (menu alignment options). Choose your preferred setting and click the Save Changes button. This will give us a nice and clean menu on our Uncode demo website:

When users click on the menu icon they will be able to see the overlay menu over the entire screen:

At this point, all pages on our website will have a menu like this, but we are about to change that.

Create a menu for your site’s inner pages by using Content Block

Content Block is an amazing and unique feature offered by the Uncode theme. It can be used to build sections, headers, footers, templates and applied all across the website. If you want to see all the available places where you can use Content Blocks, check out our article on the subject.

The first thing we need to do is to create a Content Block that will act as the menu for our site’s inner pages. From the WordPress Dashboard navigate to Content Block and click on Add New.

Name it however you wish, but use wording that will easily allow you to find that Content Block and connect to it from Theme Options. We will cover that part in a minute. We named our sample Content Block Inner pages navigation. The next steps are all about designing your inner pages’ navigation, and you can be as creative as you like with them. Our goal is to achieve simplicity and functionality, while putting together just a few extra elements to build our menu: Heading for our website title, a WP Custom Menu widget to connect our menu items, and the Social icons widget to fill the space on the right. From row settings, we added a small border below the bottom row in order to have a separator element between the menu and its content.

On the backend side, it looks like this:

A preview on the frontend will look like this:

You can see both menus with our Content Block (Inner pages navigation) under master navigation. When you finish building and designing your separate menu, click on Publish to save your work. Don’t worry, this will not create any changes on your website automatically since we need to connect Content Block with the pages to make it visible. Let’s move onto that step.

Note: It would be very helpful if you assigned a custom id for each row in your Content Block. Edit row settings and under Extra options give it a unique Element ID to your row. This will help us later when we will need to apply some CSS rules to this row. We placed inner-pages-navigation here.

Connect Content Block with your pages

Now that we have created our two menus, we need to organize them. The overlay menu is now set and we need to connect the Inner pages navigation through Theme Options to make it visible on the frontend of the website. Our goal is to have a different menu for our inner pages, but your website can also have other content types like posts, portfolios or products. If you want these content types to have a separate menu from the menu on the homepage, you will need to repeat this setting for every content type. From Uncode Theme Options, navigate to Single Page settings and expand the Header tab:

Here, you can specify a header for all your website pages. In the website page structure, the header comes directly under the main navigation and we are using this to place Inner page navigation here. For Type, choose Content Block and select the one you created by clicking on its name. Click Save Changes to save your settings.

One important note: do check your single page settings, and under Page Options on the bottom, make sure that Header settings are set to Inherit header type.

This will allow pages to inherit the header from the Theme Options settings. The truth is that we sacrifice pages’ header slot in favour of the navigation Content Block but without sacrifice, there is no victory. You can create a page header inside the content area. Now that we have saved our settings, we will see both menus on the frontend.

Now, it’s time to see how we can control the visibility of these menus.

Control the visibility of these elements with CSS or from Page options

We have two possible scenarios here:

  1. The overlay menu needs to only be visible on the homepage, and we need to hide the overlay menu on our inner pages.
  2. The navigation menu across our inner pages needs to be visible only on the website’s inner pages, and we need to hide this navigation option, which is specific to our inner pages, from the homepage.

In order to hide the overlay menu on our inner pages, we have two possible options:

  1. Hide menu from Page Options – we already mentioned these settings when we asked you to ensure your Header settings are “Inherit”. Now, you will need to look for Menu settings and turn on the option to Remove Navbar. This will hide the overlay menu from the page, and you will need to repeat this process for all pages on your site. You can use this option if you have a small website with a couple of pages, but if your website has an extensive number of pages, option two would be better suited for your needs.
  2. For every content type on the website, Uncode theme creates an array of CSS classes in the body tag. All pages on the website will have page class in the body tag, and all posts will have a single-post class and so on. You can find these classes by inspecting your website pages. Apply this rule on your website to hide the overlay menu on inner pages:
.page .menu-wrapper {
    display: none !important;
}

Next, we need to hide inner pages navigation from the homepage. Two simple CSS rules needed for that are:

.home .menu-wrapper {
    display: table-row !important;
}
.home #inner-pages-navigation {
    display: none !important;
}

Here, we are using the home class that is assigned to the website homepage, and with this class, we first want to show the overlay menu on the homepage, and in the second rule to hide the inner pages navigation from the homepage by using the Element ID we set previously (#inner-pages-navigation).

Full CSS code will be:

.page .menu-wrapper {
    display: none !important;
}
.home .menu-wrapper {
    display: table-row !important;
}
.home #inner-pages-navigation {
    display: none !important;
}

And it is important to keep it in this order. Save your CSS code and view your website frontend. On our demo, this looks like this:

Conclusion

Having two different menu styles on one website is not a feature that is frequently requested or needed, but if you happen to have the need for it for one reason or another, now you know that this can be accomplished with the Uncode theme and our workaround. Just follow our guide step by step and you will have a working solution on your website quickly and efficiently. Let us know in the comments section how this worked for you and please feel free to ask us any questions you may have. We love solving problems and will be here to help you find constructive ways to solve any issues you might be encountering. If you like this article and have any particular topics you’d like to see us address in our next post, share your questions and insights in the comments below.

Do you want our team to design and develop a stunning website for you? Send us the details and we'll start discussing a strategy for your project!
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.
Nemanja Tomanovic

Nemanja Tomanovic

Nemanja is a certified PHP Developer specialized for WordPress development. His main skills are HTML, CSS, PHP, and JavaScript. His IT career starts as a Marketing Analyst working on frontend, maintenance, SEO and different marketing tasks. At Roshem his main area of work is WordPress development.

Leave a Reply

Comments

  1. Avatar

    Like!! I blog frequently and I really thank you for your content. The article has truly peaked my interest.

    1. Nemanja Tomanovic Author

      I’m glad you liked my articles. Especially since you are the author yourself, so your support is even more important to me.

Leave a Comment

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email