Divi Menu - Add a Button Page beside the logo

Today we start with another mini Series, Divi Menus. In this post we will see how to add and customize a button page link in the main menu, just beside the logo.

The design we will create is exactly that one we have realized for another website, plugwpress.com (if you want to see the scrolling effect please visit the website) and this is the final result we will get.

So, let’ get started!

ADD THE PAGE TO MENU

Of course, the first step is create our page and then go to Appearance -> Menus and add our page to our main menu in the first position (also before our Home page!).

THE MAGIC OF CSS

Then we simply have to go in our Divi Theme Options -> General -> Custom Css and add the following lines of pure magic css.

/* add these lines in Divi Theme Options - Custom Css */

// here and below change the number according to your menu item number
li#menu-item-11296 {
 background: orange; // set background color
 max-height: 30px; // set the max height
 position: absolute;
 left: 15%; //adjust the absolute position
 top: 35%;
 padding: 2%; // adjust the padding
 padding-top: 1%;
 border: grey 1px solid; // set the border and border radius border-radius: 13px;
 transition: all 1s; // set transition
}
#menu-item-11296 a {
 color: white; // set link color
}
#top-menu li.current-menu-item:first-child a {
 color: brown !important; // set link color when selected
}
// when scrolling apply these styles
.et-fixed-header li#menu-item-11296 {
 border: white 1px solid; // set a different border
 top: 30%; // adjust position
 left: 12%;
 padding: 1.5%; // adjust padding
 padding-top: 0.6%;
}

As noted in the first comment line you have to change the menu item number ( in our case is 11296) according to your own menu item number. In order to find it you simply have to right click on the menu page link and Inspect the element; you will see then the Css ID “#menu-item-” followed by the number we are interested in.