Tagged: , , ,

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • December 30, 2014 at 5:52 pm #373212
    December 30, 2014 at 7:03 pm #373244
    Elliott

    Hi doroth!

    You can set a custom size for the header in Dashboard > Enfold > Header > Header Size. As for vertically aligning the logo it should be aligned by default but you could add some more white space at the top of your logo image or use this CSS to move it down.

    .logo img { top: 40px !important; }

    Cheers!
    Elliott

    December 30, 2014 at 9:16 pm #373288
    millertimesites

    which style sheet in would this extra code go on?
    Inside the general settings area for the header there is not a set spot to add custom CSS values

    December 30, 2014 at 9:19 pm #373293
    millertimesites

    also is there a way to set the sticky menu logo to be different than the standard?
    I found that the sticky menu logo on the test pages I have tends to shrink a bit much http://62d.14e.myftpupload.com/

    December 30, 2014 at 9:51 pm #373316
    Elliott

    Hey!

    You can use this CSS to control the height when it’s scrolled.

    .header-scrolled .logo img {
max-height: 100px !important;
}

    You can add the CSS in Dashboard > Enfold > General Styling > Quick CSS.

    Regards,
    Elliott

    December 30, 2014 at 10:23 pm #373329
    millertimesites

    Thanks a ton Elliott.
    I got both of the pieces of code in this tread to work perfect independently, but when using both it dosen’t work right.

    First I used this to restrict the minimum size of the logo on the sticky menu
    .header-scrolled .logo img {
    max-height: 65px !important;
    }

    I also saw it wasn’t vertically centering my logo pre-scroll so I added this to fix it
    .logo img { top: 20px !important; }

    The problem is the 20px spacing also carries over to the sticky menu pushing it down too far
    Am i missing an line to ignore the 20px spacing on the sticky menu?
    Maybe a style=”vertical-align:middle” somehow instead?

    here is the live test site http://62d.14e.myftpupload.com/

    December 31, 2014 at 12:58 am #373377
    Ismael

    Hey!

    Try to replace this code:

    .logo img { top: 20px !important; }

    with this:

    .logo { top: 20px !important; }

    Cheers!
    Ismael

    December 31, 2014 at 6:00 am #373415
    millertimesites

    thanks that worked perfect!

    1). If I wanted to tighten up my navigation more is it possible to set to logo to slightly float above the top bar so I can keep it how it is now, but it wont get cut off? I set the header height to 72px and the logo sticky logo at a value of 65px so I’m not sure why it would cut off; should have 7ox to spare. http://62d.14e.myftpupload.com/pages/pricing/

    2). Under the menu settings it lets me add a border or background color to any of the top level navigation links. Currently I only set “Contact Us” with a background, but is there a way to make it automatically put a background only behind the active page. So when you go to “Pricing” it would have the background and the others wouldn’t and so on?

    Thanks again,
    Jon

    December 31, 2014 at 7:09 am #373424
    millertimesites

    Ismael,

    3). Any idea on how these guys got a centered button to the left of their Phone # using the Enfold Theme?
    http://konkapot.com
    Looks like a way way to maximize space and create a call to action, but I can’t figure out the code to go under Theme Options > Header > Extra Elements > Phone Number or small info text

    Thanks
    Jon

    December 31, 2014 at 11:41 pm #373708
    Andy

    Hi!
    1.) when you minimize this header container a litte bit:

    #header_meta .container {
height: 10px;
}

    than you will be able to put the logo a little bit more above:

    div .logo {
top: -15px;
}

    2.) Please add this on your custom.css to change the menu color

    .main_menu a {
color: white !important;
}

    To change the active page color, use this:

    .current-menu-item > a {
color: red !important;
}

    For the submenu hover, you can use this:

    .header_color .main_menu .menu ul li a:hover {
background-color: white;
color: orange !important;
}

    3.) I have no idea what you mean. I can’t see any centered button to the left on mobile device. Please always provide us screenshots.

    Best regards,
    Andy

    January 2, 2015 at 12:13 am #373971
    millertimesites

    Here is the screen shot, for me it shows at the top on Mobile and also inline from the phone number on Desktop.

    http://62d.14e.myftpupload.com/wp-content/uploads/konkapot.jpg

    January 2, 2015 at 1:11 am #373981
    millertimesites

    I used your code suggestions for sliding the Logo up and it worked great on the desktop version, but not on mobile.
    When the screen shrinks the logo goes over the phone number.

    Is there a tutorial on how to better customize the mobile menu?
    Would like to re-arrange the Logo/social/phone/menu as the default layout is a little goofy.
    Being able to change the mobile Menu icon color would be amazing as it is too dark on my site http://62d.14e.myftpupload.com/

    Thanks a ton

    January 2, 2015 at 8:27 pm #374205
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 769px) {
.phone-info {
width: 40%!important;
float: right!important;
top: -38px;
position: relative;
}
ul.noLightbox.social_bookmarks {
width: 50%!important;
float: left;
}}
#advanced_menu_toggle, #advanced_menu_hide { color: white; }

    Regards,
    Yigit

    January 2, 2015 at 10:09 pm #374253
    millertimesites

    awesome that worked perfectly and your code is very easy to understand for further changes.
    I have added it here http://62d.14e.myftpupload.com/

    Now that it is working great how can I adjust the spacing between the top bar and the logo/navigation area on mobile?
    would be great to know how to tighten or widen how far they are spaced as they are pretty far apart now.

    Thanks
    Jon

    January 3, 2015 at 2:56 am #374385
    Ismael

    Hey!

    Try to add this:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
height: 130px;
}

#header_main {
top: -40px;
}
}

    Cheers!
    Ismael

    January 3, 2015 at 4:40 am #374405
    millertimesites

    awesome, you are the man!
    What a huge difference that made :)

    January 3, 2015 at 5:54 pm #374513
    doroth

    Hello!
    My English is not so good, but i Need your help.

    First thank you at all for your answers!
    My Website ist available at the follow Domain: http://www.wetternetzwerk.at –> how can i set the logo from the Header in the vertical middle?
    I have set the Header Custom Height at “Header” on 185px. But the Logo is at the top of the Header and not in the middle.

    • This reply was modified 9 years, 11 months ago by doroth.
    January 4, 2015 at 5:00 am #374630
    Ismael

    Hey!


    @doroth    : Please use this on Quick CSS to move the logo:

    strong.logo {
top: 20px;
}

    Regards,
    Ismael

    January 4, 2015 at 7:46 am #374653
    doroth

    I have addes the follow Code: 

    .logo img { 
top: 10px !important; }

    Now the Logo is in the vertical middle, but the Problem now is, when I scroll down an the Header is shrinking the Logo is cutt off.
    Please Help me.
    Thank you sincerly
    doroth

    January 6, 2015 at 2:02 am #375439
    Josue

    Hey Doroth!

    Change this piece:

    ###.header-scrolled .logo img { 
margin-top: -10px; 
}###

    To this:

    .header-scrolled .logo img { 
margin-top: -15px; 
}

    Best regards,
    Josue

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