Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 21, 2016 at 2:34 pm #619196
    Dewdan

    Hi guys,
    Thank you very much for this fantastic theme, using already 4 of them ;-)

    I have some issues trying to find a solution to get the header to stick on tablets and smartphones, i have tried some of the solutions found in the forum but nothing seems to work, I am using a child-enfold theme.

    I have added the css:

    @media (max-width:768px) { 

.html_header_top .html_header_sticky #top #wrap_all #main {
    padding-top: 64px !important;
}
#wrap_all {
position: relative !important;
}

    I have also tried adding to my child function.php this code:

    function add_custom_padding(){
?>
<script>
jQuery(window).load(function(){
jQuery('.responsive #top #main').css('padding-top','80px');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_padding');

    But nothing happens.

    Also I am using the header with logo left and menu bellow (with float to right css) and the Shrinking Header is on.
    Is there anyway to switch the header type to logo left and menu right when shrinking, i think that would look much better since it uses less space.
    I figured out I could use the following css:

    .container av-logo-container{
    height: 9px;
}

.logo, .logo a {
    overflow: visible;
}

    But I don’t know where I could implement it since if seems like a jquery of JS.

    Thank you in advance.

    Cheers
    Daniel

    • This topic was modified 8 years, 7 months ago by Dewdan.
    April 25, 2016 at 5:15 am #620974
    Ismael

    Hey Dewdan!

    Thank you for using Enfold.

    If I am not mistaken, it is disabled because a lot of mobile browsers do not support fixed or sticky elements and having a sticky header will consume what’s little left of the mobile screen. If you still want a fixed header, add this:

    @media only screen and (min-width: 989px) {
#header {
    position: fixed !important;
}
}

    Best regards,
    Ismael

    April 25, 2016 at 10:00 am #621115
    Dewdan

    Thank you Ismael,

    I did solve that already but I appreciate your support.

    I understand the issue of space on smartphones, I will try to reduce the menu and logo as much as possible.
    The problem is that since it is a single page, it is not very user friendly navigation wise.

    Any good suggestion on how to reduce the logo and menu size?

    Cheers
    Daniel

    April 26, 2016 at 6:27 pm #622385
    Yigit

    Hi!

    As Ismael said, there is not much space for mobile, especially in portrait mode. You can change the code to following to have fixed header on screens down to mobile portrait only and not include it 

    @media only screen and (min-width: 989px) and (min-width: 481px) {
#header {
    position: fixed !important;
}
}

    Regards,
    Yigit

    April 27, 2016 at 9:19 am #622860
    Dewdan

    Thank you Yigit,

    Any suggestion on how can I get the header to have a smaller height?

    I am trying to reduce as much as possible the responsive menu and logo for the portrait mode on smartphone, I think that will do.

    The client want to have the menu no matter what! And the client is the kin, right? :-)

    April 27, 2016 at 1:40 pm #623038
    Yigit

    Hi!

    Right. But if client is not a UX professional, they should be open to suggestions by professionals, in my humble opinion :)
    Please try adding following code to Quick CSS 

    @media only screen and (max-width: 480px) {
.responsive .logo a {
    vertical-align: top;
}

.responsive .logo img {
    max-height: 40px!important;
}
.responsive #header_main .container {
    height: 50px!important;
}
.responsive #top #main {
    padding-top: 85px!important;
}}

    Cheers!
    Yigit

    April 27, 2016 at 2:14 pm #623074
    Dewdan

    Thank you Yigit,

    I know, but I already fixed that editing all css bellow 480 and the result is quite acceptable.
    I must say, after all, I kind of like to have the menu on single page :-)

    Thank you very much for you quick reply.
    Daniel

    April 27, 2016 at 2:38 pm #623100
    Yigit

    Hi!

    You are welcome, glad we could help :)
    Let us know if you have any other questions or issues

    Best regards,
    Yigit

    July 25, 2016 at 5:40 pm #664732
    María Martín

    Hi, I want a sticky menu on my Web pages for smartphones, but I do not know the html language. Is there any other way to do it?

    July 27, 2016 at 3:04 pm #665779
    Andy

    Hi,

    use this code inside Quick CSS field:

    @media only screen and (max-width: 767px) {
#advanced_menu_toggle {
position: fixed;
top: 35px;
}}

    and adjust top value as needed.

    Best regards,
    Andy

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