• English

Building and styling top navigation menu in CSS and Elementor

Here is a list of tips and tricks for building top navigation menu in CSS using Elementor WordPress builder. In this case study, I will show some CSS tricks I used when building a simple, transparent menu. Menu is placed in header and contains the logo, a few menu items and a button.

What this post will cover

In this post, I will demonstrate how to create a top navigation menu in CSS previewed below. I built the website for a client without using Elementor Pro version, so I added all the menu items in Customization panel. The website is using a default theme that doesn’t offer styling options. Therefore I made all the necessary styling with custom CSS code. I used the Simple Custom CSS and JS plugin for Elementor that gives you an option to easily place custom CSS code for your website. You can check it together with other useful plugins for Elementor in this post.

top navigation menu in css

Setting up the menu background transparency

To set up transparent menu that’s sitting on top of the background photo of the hero banner image, I first used the position:absolute property. That way the header sits on top of the image and doesn’t push the content down. Note that when applying background-color, you should use rgba values. The last number indicates the opacity, where 0 means completely transparent and 1 is full opacity. The final code could look like this:

#site-header{
   position: absolute;
   background-color: rgba(255, 255, 255, 0.8);
   height: 100px;
   width: 100%;
 } 

I then adjusted the width of the content in the menu with the following code after finding the appropriate selector for the inner section of the header:

.header-inner{
   width: 1140px;
}

Styling the menu items

To give menu items a proper styling like font, size and color, you can assign each menu item a class in the Customization panel. Later you just give that class properties in CSS. Make sure to include the link selector (a) in order to apply the changes to the appropriate page links. In the example below, I assigned the class “menu-item” to each page link in the menu. When assigning the class, I didn’t include the dot before class name and just defined appropriate styling in CSS later.

top navigation menu in css

The final styling of the menu items in CSS then looked something like this:

.menu-item a{
   font-family: 'Red Hat Display', sans-serif;
   font-weight: 900;
   color: #41B7E1;
   font-size: 14px;
   text-transform: uppercase;
 }

Styling the menu items’ hover and focus state

When you want to style a menu item’s look when you hover over it with a mouse, use the :hover selector to define the link’s properties:

.menu-item a:hover

When you click on the link, the styling will go back to normal state. If you want to define how the menu item looks after clicking on it, use the :focus state:

.menu-item a:focus

Styling the current menu item

After clicking on the page link in the menu, you probably want to make it clear in the menu which page you are currently viewing. You do so by distinguishing its look from the rest of the menu items. To do that, you need to find a class that is assigned to the selected menu item (page label) and then change the properties of that class in CSS. In this example, using Inspect element, I was able to trace down the class name of the current menu item and just assigned it appropriate properties in CSS. Again, don’t forget to add a link selector (a) after the class name:

.primary-menu li.current-menu-item a{
   font-weight: 900;
   color: #252D32;
 }

Adding a ‘Download’ button to the menu

Since in this project I wasn’t using Elementor Pro that offers a widget to customize the top navigation menu, all the adjustments needed to be made in WordPress Customization panel or through CSS. Therefore to add a button, I fist added another menu item with URL link. I gave it a separate class and assigned the properties in CSS to make it look like a button. This is the ‘Download’ button in the menu:

top navigation menu in css

And this is the Customization panel where I added a new menu item with the URL link and appropriate ‘Download free app’ label. I named the CSS class ‘menu-button’ and assigned it to this menu item.

top navigation menu in css

The CSS styling of the class included mainly background color, rounding the corners with border-radius property and padding. Note that these were adjusted in the .menu-button class without including the link selector (a).

.menu-button{
   background: #41B7E1;
   border-radius: 8px;
   padding: 15px;
 }

To style the text itself, I then added the ‘a’ selector since the label was in fact a link:

.menu-button a{
   font-family: 'Red Hat Display', sans-serif;
   font-weight: 900;
   color: #ffffff;
   font-size: 14px;
   text-transform: uppercase;
 }

After that, I just additionally added :hover and :focus states to the styling.

Adjusting the size of the logo

The logo was attached in the WordPress Customization panel. To give it appropriate size, I found the class automatically assigned to it and used the code below to modify it including the image ‘img’ selector:

.custom-logo-link img{
   width: 256px;
   height: 53px;
 }

Vertically aligning the items in the menu

Finally, I wanted vertically align the items in the menu and place them in the middle of the block. I first had to find the class assigned to the box with menu items. I set the display to flex, used the flex-direction: column to align the items vertically and then proceeded to centrally justifying the content. Don’t forget to add list items selector (li) at the end of class name in the code:

.header-inner li{
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

That’s it! Now you have a transparent menu going on top of your banner image with some nicely styled links, logo and a button.

Close Menu
×

Cart

Get a FREEBIE!

Download these free trifold brochure PSD mockups.