Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 15, 2015 at 2:11 am #488080
    steve55555

    I know that there is a way to add a small little bar above the header but from a conversion metric this is very poor.

    Numbers need to be easy to see, larger and more visible like this one: http://allegradc.com/

    How do I add a number like that on Enfold, with the menu nicely below it?

    Many thanks

    August 15, 2015 at 2:34 am #488081
    Cyril

    You can add this code to your style.css file (Appearance -> Editor)

    .phone-info {
font-size: 25px; // adjust as needed
}
    August 15, 2015 at 9:48 am #488180
    Rikard

    Hey @steve55555,

    Did you try @Cyril’s suggestion and did you have any luck with it?

    Best regards,
    Rikard

    August 15, 2015 at 7:11 pm #488276
    steve55555

    Hi guys,

    The problem is it will just make the number in that horrible bar at the top bigger. I want it to be in line with the logo just above the right menu.

    August 17, 2015 at 4:58 am #488535
    Rikard

    Hi,

    Ok, though I’m not sure what you mean by the right menu?

    Thanks,
    Rikard

    August 17, 2015 at 12:03 pm #488814
    steve55555

    right menu i mean as main menu – the menu right of the logo.

    Anyway, I’d really like some nice looking contact details like telephone number, email etc in the top right of the website header – parallel with the logo – not above it like the top bar option enfold has.

    August 18, 2015 at 10:09 am #489337
    Rikard

    Hi,

    Ok, I think adding a widget area to the header would give you the most freedom design wise: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Thanks,
    Rikard

    August 23, 2015 at 11:22 pm #491947
    steve55555

    When i resize my screen to test responsiveness of the contact details, they become skewed and don’t fit well. Looks great on my screen now but will look bad on other peoples computers – how do i get this right?

    August 25, 2015 at 6:30 am #492631
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling to align it better on smaller screens:

    @media only screen and (max-width: 1060px) {
#header .widget {
    left: 50% !important;
    top: -20px !important;
    transform: translate(0%) !important;
}
}

    And you can use the following to control the header and paragraph text for smaller screens:

    @media only screen and (max-width: 1060px) {
#header .widget h3 {
font-size:14px !important;
}
}

@media only screen and (max-width: 1060px) {
#header .widget p {
font-size:10px !important;
}
}

    Best regards,
    Rikard

    August 25, 2015 at 11:40 am #492811
    steve55555

    Hi,

    Thanks for your time I appreciate your feedback and advice.

    Have you seen what this does on the mobile website? Is there a way of saying if it’s on a mobile then show widget header below logo?

    What do I need to do for laptops?

    Thanks

    August 26, 2015 at 12:01 pm #493469
    Andy

    Hi!

    as Rikard already showed you need to work with media queries. For mobile use something like this: 

    @media only screen and (max-width: 736px) {
#header .widget h3 {
font-size:10px !important;
}
#header .widget p {
font-size:8px !important;
}}

    Adjust as needed.

    Cheers!
    Andy

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