In this part of the series, we will see how to design the menu (Navigation Bar) just like in divi café demo.
For this we need to follow below instructions-
- Go to Divi > Theme Option > In General Tab > Upload Logo (in demo logo used is http://elegantthemes.com/preview/Divi/cafe/wp-content/uploads/2015/06/d-cafe-logo-01.svg ).
- Go to appearance > customize > Header and Navigations > header style > Centered > Save.
- Go to appearance > customize > Header and Navigations > primary menu bar > perform following actions.
- check Hide Logo Image.
- adjust Logo Max Height accordingly (as per divi café logo it is “80” approximate).
- adjust letter spacing (in demo it is about “2”).
- set font properties accordingly.
- Change Text Color, Active Link Color, Background Color, Dropdown Menu Background Color, Dropdown Menu Line Color and Dropdown Menu Text Color accordingly.
- Select “Expand” in “Dropdown Menu Navigation”.
- Go to appearance > customize > Header and Navigations > Fixed Navigation Settings > Change Primary Menu Background Color (in demo it is #fdfaf5), and set all other things accordingly.
All done here! Hope You all like the series “Divi Cafe Demo”.
For any question or query, please feel free to post comment or create a new question.
You May Also Like
- Tested on Divi Version 2.7.5
Woah, that’s simple! Thank you!
@Khanysha
You’re Welcome 🙂
Man, great work! Loved that posts series.
Greetings from Brazil.
You’re Welcome 🙂
Thank you! And how about the second menu at the bottom of the page and additional footer with the social media icons?
@Andrew
You can read here https://elegantenthusiast.com/divi-cafe-demo-footer-menu/ about how to design second menu at the bottom of the page and additional footer with the social media icons.
Hope you like it.
Awesome! Thanks!
@Mike
You’re Welcome 🙂
Dear Abhishek,
Thank you for great articles. Would like to become a member of Elegant Enthusiast Club 🙂
Still here is the hard part for me. What setting keeps the navigation menu on top, when you scroll down? Tried almost everything, no luck so far, but it must be somewhere… Please help!
You can go to Divi > Theme Options > General Setting and here you can enable the fixed navigation option
Hi,
Now we can´t display logo when scroll like Divi Cafe demo header/navigation
How can I do the same?
…ok—this setting is in Divi→Theme Options→General→ Fixed Navigation Panel, turn to “On”.
Sorry for disturbance, and thank you for great lectures, Abhishek!
I just checked this comment after already replying to previous comment 🙂
Love this theme layout and especially your tutorials. Can you enlighten me how to get an SVG file displayed as the logo? I have an SVG logo, and I used an SVG plugin for WordPress, but my logo does not display.
Hey, great job. I want to have a drop shadow in the bottom of the header, how can i do this?