Team

Solutions

Work

Blog

Engage

Team

Solutions

Work

Blog

Engage

Uncode theme: Offer both a vertical and a horizontal menu

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Follow this illustrated guide on how to create a Vertical and Horizontal menu at the same time using Uncode theme build-in options. We elevate this to a higher level by applying custom CSS rules for controlling the visibility of the menus for members who are not logged in.

Here at Roshem, we are big fans of the Uncode WordPress theme and we always look forward to working with it. We’ve come to believe that Uncode is one of the best WordPress themes available on the market today. Uncode provides the ability to import various demo layouts designed to be pixel-perfect with great flexibility and performance.

Not so long ago, we were part of shaping a vision for one of our clients that involved creating a membership community that would leverage music for positive social and environmental change, as well as further a conversation around inclusive business models. Our team immediately started talking about how we can put Uncode to work on this project. After a couple of hours of planning a development strategy to realise this idea, we ended up with a design that will have a separate menu for logged-in members. This option even fit in with the common preference for members’ menu to be placed in the left sidebar.

The concept was: a top horizontal menu for all visitors and users who are not logged-in, and a separate vertical menu in the sidebar for logged-in members with exclusive access to content that is not publicly available. Out-of-the-box, Uncode doesn’t support this kind of menu organization in its own Menu options. There are some plugins that can help with this, but most available approaches didn’t fit well with us because we always want to stay within the available theme ecosystem and work on solutions from there.

We will guide you, step-by-step, through the process that transpired. We conceptualized a very simple, and yet effective solution. So, let’s get started!

Prepare your menus

First, we need to create two separate menus. To do this, navigate to Appearance -> Menus in the WordPress Dashboard:

WordPress Dashboard with Menus item selected

The Menus page is now open and this is the place where you can create new menus, add new pages, posts or other content linked to the menus, edit already created menus and control menu positions.

Here, we are going to create two menus. One for the horizontal top menu and one for a vertical sidebar menu. In the Menu name field, type in a name for your horizontal menu. In this test case, we are naming ours Top menu. Click on the Create Menu button to create your menu.

Repeat this step to create one more menu that will be used for the sidebar. We are naming this one the Sidebar menu, but you will probably come up with something more relevant. Now that we have our two menus created, we need to add pages to them. First select Top menu from the dropdown:

For this purpose, we created draft pages just to have something to work with. As this is our main menu that will be visible to everyone we are going to add pages like About, Portfolio and Contact to it. From the Add menu items box “select pages”, you want to add to the Top menu and click the Add to Menu button. Under Menu Settings -> Display location select Primary menu. This will assign the Top menu to the primary navigation position of the Uncode theme.

Click on Save menu to save your settings. Now, select the Sidebar menu and repeat the same process of adding pages to the menu but for Display location select Secondary menu.

If you visit the front end of you site at this point you will see something like this:

No worries, this is just for now and we need to assign these Display locations to cover the mobile view of the menu. In the next step, we are going to create a sidebar and place the Sidebar menu in its area.

Create a new sidebar in Uncode Theme options

To create a sidebar section that will play the role of being a container for your side menu, navigate to Uncode -> Theme Options from the WordPress dashboard (In our example, this is referenced as an Uncode child -> Theme Options as we are using a child theme):

Scroll down to the Utility options on the left side and click on the Sidebars:

Utility options of Uncode theme

On the right side of Theme Options windows you will now have these options:

Click on Add New. Enter a name for the new sidebar, we are naming this Side menu and click on Save Changes. You have now created a new sidebar that is accessible from Widgets and will act as a container for the Sidebar menu. We will get to the Widgets part of the settings in just a few more paragraphs.

Activate Sidebar by content type

Now that we have created a new sidebar, the next step is to set where this sidebar will be displayed. The Uncode theme supports sidebars in all default WordPress single content types as well for content archives. For singles, you can set sidebars for Posts, Pages, Portfolios (which come with Uncode theme and are not a default WordPress content type) and 404 pages. For archives, you can choose Posts, Pages, Portfolios, Authors and Search. 

Our goal is to have this sidebar and its menu items available on all places that logged in members visit, so we are going to activate this sidebar for all Singles and Archives. The procedure is the same for all types and we are going to showcase how to add this to Pages. You can repeat the same process for all other types and archives. 

On the left side of Theme Options under Singles click on Pages. This will display all available settings for single pages on the right side of Theme Options. Expand Sidebar options and click to Activate The Sidebar:

You will need to set up a couple of things in the new box that shows up after you activate the sidebar. Here’s how we set this up in our example, but you can play with this to match your own design. There are a couple of things that must be set exactly as done by us, so please replicate them.

By following an order of settings in Theme Options, we setup the sidebar like this:

  1. Sidebar – this is where you choose which sidebar will be displayed on your Pages. Remember, we created this one in the built-in Uncode theme Sidebars. We are using Side menu for this but you can set it to anything that you’ve created.
  2. Position – there are two options for this, left or right. We want this to be on the left side of the page but again you can set it to your own needs and design.
  3. Size – The Uncode theme uses a grid system inspired by the Bootstrap grid system. This means that page width is divided into 12 equal columns and the width of a single column is around 8.3% of the page width. The number set here will represent the width of the sidebar in columns and you can set this to your own preferred option.
  4. Sticky Sidebar – this one is very important to turn on. It will stick the sidebar to its position on the left side of the screen and when members scroll down on pages it will stay in this position. 
  5. Skin – if you are familiar with Uncode structure and customization this will be very clear to you. If not, please read Uncode’s official documentation about skins. In short, we are going to combine a dark background with white text colour so we need to set the skin to Dark.
  6. Background colour – we use default background colour options from the Uncode theme but you can define your own in Palette options and use it here.
  7. Sidebar Filling Space – activate this option to remove the padding around the sidebar and make the sidebar fill the height.

After setting everything don’t forget to click on Save Changes. Our sidebar won’t show yet as there is nothing in it so we need to add some content to be able to see it.

Add menu to the sidebar

Navigate to Appearance -> Widgets in the WordPress dashboard:

WordPress dashboard with Widgets selected

From here, you can control all available widgets and assign them to available sidebars. Since we have created our sidebar in Uncode theme options, it will be available here for editing.

There are two ways of adding widgets to the sidebar:

  1. Drag and drop the widget from the list of available widgets on the left into the sidebar box on the right side.
  2. Click on the small arrow next to the widget’s name to open the dropdown and from that list select the sidebar where you want to show that widget. Click Add Widget.
WordPress Navigation Menu Widget

The next steps are all about your needs and requirements. You can add all kinds of widgets to your sidebar and style them to match your design. The main element for us was the addition of a secondary navigation menu and this is easily done by selecting the Navigation Menu widget and Sidebar menu.

Settings of Navigation Menu Widget in Wordress

We added one image and search functionality just to utilize the space. Now, if we visit our site’s front end, we can see our new sidebar and the menu in it:

What is left to take care of is the visibility of elements on different devices.

Control the sidebar visibility

We need some CSS code to jump in so we can set everything we need. You can add this custom code where you are most comfortable with CSS editing. We are using the Uncode child theme and are placing all custom CSS code in the child theme style.css file available in Appearance -> Theme Editor

First, let us hide the top menu that appears in the first line. We don’t want to see this on desktops and tablets. The code for that is:

.top-menu {
    display: none !important;
}
.mobile-secondary-menu {
    display: none !important;
}

This code is self-explanatory. All we are doing here is hiding the top-menu which applies to desktop view and the mobile-secondary-menu which applies to tablets and mobiles. Next, we want to hide our sidebar menu from non-logged in members. To do that, add this part of CSS code to your custom CSS:

.col-widgets-sidebar {
    display: none !important;
}

This col-widgets-sidebar class will be assigned to the sidebar from the Uncode theme markup when you activate the sidebar in Theme Options. Older versions of the Uncode theme won’t have this class so you will need to work a bit more to find appropriate targeting. All we are doing here is hiding the sidebar from non-logged in members. After applying these couple of CSS rules our front end now looks like this:

Demo page for non-logged in members

We are using WordPress native CSS class logged-in to target visitors who have logged in to our website. This CSS class will be assigned to them when they access our website dashboard. Our front end of the site will now display that sidebar menu we created:

.logged-in .col-widgets-sidebar {
    display: table-cell !important;
}

We are using WordPress native CSS class logged-in to target visitors who have logged in to our website. This CSS class will be assigned to them when they access our website dashboard. Our front end of the site will now display that sidebar menu we have created:

We now have our Top menu with publicly-available pages, and for logged-in members, a separate Sidebar menu with special content and pages. Just what we were aiming for in the first place! For tablets and mobile devices, we need just a couple more lines of code:

@media (max-width: 959px) {
    .logged-in .col-widgets-sidebar {
        display: none !important;
    }
    .logged-in .mobile-secondary-menu {
        display: block !important;
    }
}

We are targeting them through a media query which is set to apply these CSS rules for all devices for which the max screen resolution is 959px. This is an Uncode theme breakpoint for tablet devices. In the first part of the code, we are hiding the Sidebar menu from the main content area to leave more space for page content. In the second rule, we are displaying that mobile menu we previously hid and assigned as a Secondary menu display location. Our menu for members-only will now be in the toggle dropdown menu like shown in the picture below:

Tablet view of demo menu with Uncode theme
Tablet view
Mobile view of demo menu with Uncode theme
Mobile view

We now have everything neatly packed in one place, and we achieved this by using Uncode theme default menu display locations. First, we have our publicly-available pages and our menu for logged-in members only is under the Search option. You can also easily invest more work into styling this to create more creative menus and designs.

Conclusion

Our goal with this illustrated guide was to show you how you can use the Uncode theme default core features to create something more than what is available in its default menu options. This example can be further customized and used in various ways. You can leave it visible for everyone if, for example, you have a big list of menu items and want to divide them for better organization on desktop view.

Hope you liked this article and found it useful for your work!

Let us know in the comments what WP related topics would you like us to cover next.

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. Thanks for the marvelous posting! I quite enjoyed reading it, you will be a great author. I will make certain to bookmark your blog and may come back someday.
    I want to encourage you to definitely continue your great work, have a nice weekend!

  2. Howdy! Someone in my Myspace group shared this website with us so I came to give
    it a look. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers!
    Outstanding blog and superb style and design.

  3. Like!! Great article post.Really thank you! Really Cool.

    1. Author

      Thank you for your comment! I’m glad you liked it.

  4. Thank you for sharing your thoughts. I really appreciate your efforts and I am waiting for your next write ups
    thanks once again.

    1. Author

      Thank you for your comment! It’s quite busy on the development side so I don’t get much time for writing. Several topics are on the list and will try to publish some of them.

Leave a Comment

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