How to Design the Navigation Bar just like in divi café demo

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.

Khanysha on June 8, 2016 at 7:37 pm

Woah, that’s simple! Thank you!
- Abhishek on August 4, 2016 at 11:44 am
  
  @Khanysha
  
  You’re Welcome 🙂
Marck Bauer on June 9, 2016 at 11:39 am

Man, great work! Loved that posts series.
Greetings from Brazil.
- Abhishek on August 4, 2016 at 11:45 am
  
  You’re Welcome 🙂
Andrew on June 9, 2016 at 5:28 pm

Thank you! And how about the second menu at the bottom of the page and additional footer with the social media icons?
- Abhishek on August 4, 2016 at 11:47 am
  
  @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.
Mike on June 9, 2016 at 5:36 pm

Awesome! Thanks!
- Abhishek on August 4, 2016 at 11:48 am
  
  @Mike
  
  You’re Welcome 🙂
Art on November 5, 2016 at 5:18 am

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!
- Abhishek on November 6, 2016 at 9:03 pm
  
  You can go to Divi > Theme Options > General Setting and here you can enable the fixed navigation option
  - Salomé on October 20, 2017 at 9:33 am
    
    Hi,
    Now we can´t display logo when scroll like Divi Cafe demo header/navigation
    How can I do the same?
Art on November 5, 2016 at 9:22 am

…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!
- Abhishek on November 6, 2016 at 9:10 pm
  
  I just checked this comment after already replying to previous comment 🙂
Michael Bingham-Hawk on January 7, 2017 at 7:26 pm

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.
Alex on July 10, 2017 at 9:19 pm

Hey, great job. I want to have a drop shadow in the bottom of the header, how can i do this?

Part 7 – Divi Café Demo Navigation Bar

All done here! Hope You all like the series “Divi Cafe Demo”.

You May Also Like

15 Comments

Submit a Comment Cancel reply

New Questions

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

You have Successfully Subscribed!