Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 23, 2017 at 9:44 pm #843285
    Eleina_Shinn

    Site Here: http://scottstillsonlaw.com/newsite/

    Hi: I have created a header widget to add Call Today and Phone Number, top right, in header, above the menu. Problem is three-fold:

    1) Would like some space, a margin, below the header widget and above the menu – they are too close together. Would ideally like to move the menu down, so the bottom of the menu is in line with the bottom of the logo. Would really love to move both down a bit, the widget and the menu, with more space between the two – so the spacing looks vertically centered with the right amount of whitespace.

    2) It also appears that the header widget is interfering with the functionality of the Menu – because when you are immediately under the widget, those menu items do not work.

    Here’s the css I’ve used to get the header widget in that position above the menu, and maybe it’s wrong

    #header .widget {
    left: auto;
    right: 10px;
    padding-top: 0;
    margin-top: -60px;
    position: absolute;
    top: 0;
    transform: translate(-0%);
    z-index: 999999;
    }

    3) Header Widget doesn’t show up on cell phones – probably because of my negative margin; I’m sure I’ve done this all wrong to get it’s placement where I want it – looked all around your forum though before I reached out, so I know this is a common request, I’m just messing it up!

    Thank you!

    • This topic was modified 7 years, 4 months ago by Eleina_Shinn.
    August 24, 2017 at 6:33 am #843355
    John Torvik

    Hey Eleina_Shinn,

    Thank you for writing in!

    I have tried to access your dashboard, but the above credentials are wrong.

    Best regards,
    John Torvik

    August 24, 2017 at 5:35 pm #843612
    Eleina_Shinn

    I’m so sorry, try this…

    August 28, 2017 at 8:17 pm #845004
    Eleina_Shinn

    Hey, I still haven’t heard from you guys, which is very unusual…. so I’m sending login credentials again.

    Please let me know if you’ve had a chance to take a look at this, as I am anxious to resolve.

    August 29, 2017 at 4:40 am #845158
    Ismael

    Hi,

    Thank you for the info.

    Please add the following css code to adjust the menu items.

    .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
    top: 40px;
    position: relative;
}

    Replace the widget css modification with the following.

    #header .widget {
    position: absolute;
    left: auto;
    right: 10px;
    top: -30px;
    transform: translate(-0%);
    padding-top: 0;      
    height: auto;
    z-index: 0;
}

    On mobile, maybe you should hide the widget and use theme’s top header.

    @media only screen and (min-width: 768px) {
     #header #header_meta { display: none !important }
}

@media only screen and (max-width: 767px) {
     #header .widget { display: none !important }
}

    Best regards,
    Ismael

    August 29, 2017 at 6:25 pm #845405
    Eleina_Shinn

    Okay, the Header looks perfect now, thank you soooooo much!! (and now I know how to do this for other sites, so thrilled)

    And, it’s great that it is removed for mobile, but how to add the Top Bar only for mobile devices ( which would be perfect) ?

    I did try adding phone number to extra elements in header to see what would happen and it ended up placing space below the menu, was weird, so I removed it. So How to use the Top Bar only for mobile devices, where it would be perfect?

    August 30, 2017 at 8:37 am #845680
    Ismael

    Hi,

    And, it’s great that it is removed for mobile, but how to add the Top Bar only for mobile devices ( which would be perfect) ?

    We provided the css code above. It will prevent the top header from displaying on desktop view. 

    #header #header_meta { display: none !important }

    Best regards,
    Ismael

    August 31, 2017 at 7:21 pm #846471
    Eleina_Shinn

    Hi Ismael:

    Unfortunately, this doesn’t work either. I added all of your CSS. Then I added the Phone Number to Theme Options/Header/Extra Elements. The phone number doesn’t show up – the only thing that happens is a space is added (like a top bar amount of space ) under the Main Menu, under the Header, on the Deskcop version (which I don’t want). Nothing on Mobile at all, no top bar, no phone number.

    September 1, 2017 at 10:09 am #846762
    Ismael

    Hi,

    You don’t have to add the css code again because it’s inside the css media query already. We corrected the css codes. Please remove browser or hard refresh before checking the page.

    Best regards,
    Ismael

    September 1, 2017 at 6:36 pm #846949
    Eleina_Shinn

    Okay, that’s awesome; this also makes Enfold more flexible, gives it a different look and having phone cta large in header – that’s something I’ll do again, so thank you!

    One more thing though – as soon as you add the extra element, a space appears below the header, you’ll see it – has border above and below, same color as header. I’ll attach a screen shot – it only appears when you add the phone number in extra element – would love to not have it there.

    Here’s a screenshot where I hi-lited the area in red that I am referring to – you’ll notice if you remove the extra element, this goes away too: http://scottstillsonlaw.com/newsite/wp-content/uploads/2017/09/Scott-Stillson-Attorney-at-Law-%E2%80%93-Family-Law-Criminal-Law-Wichita-Falls-Texas.png

    September 4, 2017 at 8:43 am #847575
    Ismael

    Hi,

    It’s the main container offset. Please add this code in the Quick CSS field.

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 133px !important;
  }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.