1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Header 1 layout

Discussion in 'Basic Support Forum' started by Sherissa R, Aug 10, 2018.

  1. Sherissa R

    Sherissa R Member
    Divi Powerful Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi

    I am trying to recreate the navigation from this site
    on to this site here

    1. Which class do I target to make the black navigation bar narrower in my header 1 layout?
    2. Make the purple focus/active/hover colour bigger?
    3. Is it possible to create the little fancy left and right end elements?

    Thank you in advance.
     

    Attached Files:

    #1 Sherissa R, Aug 10, 2018
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    To add the 2 arrow:

    You need to go the section settings -> advanced -> custom css -> before & add this:
    Code:
    Log In or Sign Up to view this code.
    You need to go the section settings -> advanced -> custom css -> after & add this:
    Code:
    Log In or Sign Up to view this code.
    You need to go the section settings -> advanced -> custom css -> main element & add this:
    Code:
    Log In or Sign Up to view this code.
    ===============

    As for the smaller black menu background, you may try to add this CSS at Divi -> Theme Options -> Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help Pro Support, Aug 10, 2018
    Sherissa R likes this.
  3. Sherissa R

    Sherissa R Member
    Divi Powerful Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    That worked brilliantly! Thank you!


     
    #3 Sherissa R, Aug 10, 2018
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  4. Sherissa R

    Sherissa R Member
    Divi Powerful Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi, I just noticed that when you scroll the fixed navigation portion, the styling goes off a bit.
     

    Attached Files:

    #4 Sherissa R, Aug 10, 2018
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Apparently, negative margin does not work well with the sticky feature. As a workaround, you may try adding this custom CSS:
    Code:
    Log In or Sign Up to view this code.
    It will return back to the original location during sticky.
     
    #5 Divi.Help Pro Support, Aug 10, 2018
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
(You must log in or sign up to post here.)