1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Solved Help with Global Header

Discussion in 'Get Help On Divi Wordpress' started by Scott Douglas, Mar 25, 2020.

  1. Scott Douglas

    Scott Douglas Member

    Hi,

    So I'm working off of a brief from a designer, and the header is probably too much info for a header but it is what it is.

    Basically the main menu line is normal stuff, but they want a line above it with all of the info (address, phone number, hours, facebook & ig logos that connect to pages, and email icon but I haven't added this yet).

    I was able to create it okay for the desktop version. But when it's reduce to ipad or mobile size the top line which I created using a text mod just scrunches up. I've attempted some css to shrink it, but it just looks awful.

    Is there a better way to achieve this so that it works naturally on mobile devices? Should I be looking at a header/menu plugin like Superfly? Any help or tips would be awesome.

    Here's the live demo site: http://www2.pcdc.net/~vscr/testing/

    And I've attached a screen shot of the wireframe backend - let me know if you'd like me to provide any more info.
     

    Attached Files:

    1. AD Best plugin to easily integrate a Mega Menu into Divi: https://divi.help/link-forums/quad-menu.155/
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to wrap each of your text elements in <span> tag.

    Then add the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .vs-header.et_pb_section .vs-head.et_pb_row .header-topline h6 span {
        display: inline-block!important;
    }
     
  3. Scott Douglas

    Scott Douglas Member

    So this is the code I ended up with in the text mod, including the span code:

    <h6><span><a href="http://g.page/velvetsunrisecoffeeroasters" target="_blank" rel="noopener noreferrer"><i class="fas fa-map-marker-alt"></i> 8-100 Ringwood Drive, Stouffville, ON, L4A 1A9</a> <i class="fas fa-phone-alt"></i> 905-205-0783 <i class="far fa-clock"></i> Tues-Sat 9am-4pm <a href="https://www.facebook.com/velvetsunrisecoffee" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook fa-lg"></i></a> <a href="https://www.instagram.com/velvetsunrisecoffee" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram fa-lg"></i></a></span></h6>

    It still just line breaks awkwardly, doesn't seem like there's an a way to make it look decent... any alternative solutions you know of?
     
    1. AD Free Divi premade layouts & sections for download: https://divi.help/link-forums/divi-den-freebies.145/
  4. Scott Douglas

    Scott Douglas Member

    I also tried just making that top line another menu mod, but in mobile it creates 2 burger menu's.... do you have any experience with header/menu plugins like superfly? Would those work better to make this thing work?
     
  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    It should be this:
    Code:
    <h6><span><a href="http://g.page/velvetsunrisecoffeeroasters" target="_blank" rel="noopener noreferrer"><i class="fas fa-map-marker-alt"></i>  8-100 Ringwood Drive, Stouffville, ON, L4A 1A9</a></span>     <span><i class="fas fa-phone-alt"></i>  905-205-0783</span>     <span><i class="far fa-clock"></i> Tues-Sat 9am-4pm</span>  <span><a href="https://www.facebook.com/velvetsunrisecoffee" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook fa-lg"></i></a></span>   <span><a href="https://www.instagram.com/velvetsunrisecoffee" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram fa-lg"></i></a></span></h6>
     
    1. AD Easily add Mega Menu for your Divi site: https://divi.help/link-forums/divi-mega-pro.149/
  6. Scott Douglas

    Scott Douglas Member

    That's much better, thank you!