1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, 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 Text across header area

Discussion in 'Basic Support Forum' started by AltiM@c, Nov 16, 2018.

  1. AltiM@c

    AltiM@c New Member

    HI, I'm trying to create a header that looks something like the attached example. Is there a way to more or less just float the text that goes across, beginning with "Learn with Purpose..." so it goes all the way across the header area? Just not sure of the best way to accomplish this to simulate this layout. What's in the screen shot is not using your plugin, it's hacked together with a special function and then a fullwidth menu module below it and it causes all kinds of issues with the rest of the site. So I want to replace this with DU Header. Thanks!
     

    Attached Files:

    #1 AltiM@c, Nov 16, 2018
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Kindly download the json file & import it in Divi Library. The name of the library item is Sample Header.

    **I use float left for the logo image module & add a text module beside it.
     

    Attached Files:

    #2 Divi.Help Pro Support, Nov 16, 2018
  3. AltiM@c

    AltiM@c New Member

    This is awesome, works great and i now have it 99% exactly as we need! Two minor things, can't get the search icon to show up in top nav, although I disabled and re-enabled the custom menu there as per the suggestion in the forum. Also, I want to make the entire header area sticks to the top of the screen (all three sections) not just the primary menu. Setting the CSS class to "free-sticky" for all of them is not going to work but i suspect there is a fairly simple CSS solution for this?
     
    #3 AltiM@c, Nov 18, 2018
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    What you mean by top nav? Is it a menu module? If it is a menu module, you need to add this CSS class in the menu module settings: free-header-menu
    Paste the code below at Divi -> Theme Options -> Integration -> Add code to the < body > (good for tracking codes such as google analytics)
    Code:
    Log In or Sign Up to view this code.
     
    #4 Divi.Help Pro Support, Nov 18, 2018
  5. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Also for the search icon, you need to enable it in the Theme Customizer -> Divi Ultimate Header Plugin -> Header & Navigation -> Enable Search Icon
     
    #5 Divi.Help Pro Support, Nov 18, 2018
    1. PRO MEMBER PERKS Divi Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade designs:Learn More
  6. AltiM@c

    AltiM@c New Member

    Thank you Shafaq! This worked great for on issues. I do have a question on the classes; I see in the FAQ that using the 'free-sticky" class will work in cases where we only want the menu itself to stick. I saw that there were other classes applied to some of the modules in the layout you provided., Is there any documentation on which classes are required for the layout to work as intended? I did not realize "free-header-menu" needed to be set as the class of the top menu, and I also saw "free-header-menu free-menu-padding-small" in there somewhere. Are those always there or did you use those only for the layout you created for us? Thank you again for your help!
     
    #6 AltiM@c, Nov 19, 2018
  7. AltiM@c

    AltiM@c New Member

    Sorry, you are not Shafaq, and that should have read "BOTH issues" above. I was in three different TS threads this weekend ;-) Thanks again!
     
    #7 AltiM@c, Nov 19, 2018
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  8. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Basically for our header plugin, there are 2 main CSS classes that have special functions:

    First one is free-sticky, which will make your element sticky.
    Second one is free-header-menu in the menu module CSS classes. This CSS class is meant to show search icon, cart icon & hover effect in the menu module.

    The rest of the CSS classes are just meant to style the element visually. No special function. For example, free-menu-padding-small is just meant to make the menu module slimmer.
     
    #8 Divi.Help Pro Support, Nov 19, 2018
  9. AltiM@c

    AltiM@c New Member

    Got it, thanks again and really appreciate the quick response especially on a Sunday morning ;-)
     
    #9 AltiM@c, Nov 19, 2018
    Divi.Help Pro Support likes this.
    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.)