Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 16, 2015 at 12:46 am #380547
    scottadvertisinginc

    Hi there!
    I need to execute a number of small changes (ASAP) to Enfold and I could use your assistance because I’m not having luck applying the recommendations I have found in the forums.

    I’m using the logo left, menu below header with the top menu holding social icons on the left and phone info on the right. The logo is vertical and the client wanted it to breach the top menu bar, so I modified CSS to raise the position and the Z-axis for the logo. I also moved the social icons over about 105px to accommodate the logo.

    Here’s where I’m falling down. First…the menu bar doesn’t convert to the mobile menu soon enough. When you make the browser window narrower, there is a moment where the last menu item goes to the next line down. I need to fix that.

    But most importantly, once the mobile menu is engaged, I want to also do the following:
    1. Eliminate the header background image and set header background to black.
    2. Center the logo in the screen.
    3. Center the social icons below the phone number, but still above the logo (only because I suspect that moving them below the logo would be a nightmare to code).
    4. Load a special color box (I’ll ID it as hmamobile) that has special mobile-only content in it and shut off the items on the page that would normally load. This part I think I’ve got – it’s not in place, but I’ve done something similar on another site and plan to pull code from there.

    If there is a way for you to get back to me tonight, I would be super appreciative. I need to show this in “working” order tomorrow morning and the header is my biggest challenge.

    Thanks…in advance…for your help :-)

    Bill

    January 16, 2015 at 4:21 pm #380817
    scottadvertisinginc
    This reply has been marked as private.
    January 17, 2015 at 1:43 am #381165
    scottadvertisinginc
    This reply has been marked as private.
    January 19, 2015 at 4:58 pm #381881
    scottadvertisinginc
    This reply has been marked as private.
    January 19, 2015 at 5:09 pm #381890
    Yigit

    Hi Bill!

    Sorry for the late reply!
    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1100px) {
.av-main-nav > li > a { padding: 0 7px; }}
@media only screen and (max-width: 990px) {
div#header_main {
background: black;
}
.responsive .logo {
left: 45%;
}
#top .social_bookmarks li a {
margin-left: 0; 
}

    You can turn on custom CSS class for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give elements you would like to hide on mobile a custom CSS class (i.e.: only-desktop ) and then add following code to Quick CSS 

    @media only screen and (max-width: 990px) {
.only-desktop { display: none !important; }}

    P.S.: Our queue goes from oldest post to the newest ones and self posting pushes your query to the end of the queue. We probably have answered you sooner if you have not self posted. Just a friendly advice for the future :)

    Regards,
    Yigit

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