Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1238844

    Hi,

    Theme settings have 3 options:

    And the “header behaviour” tab gives the option “Shrinking Header”.

    I want to use “Large Header Size” and “Shrinking Header enabled” only for the homepage, and disable “shrinking header” and and use a custom header size of 45px for all other pages.

    What about defining 45px custom header size and disable shrinking header in the theme options, and CSS for the homepage with .page-id-xxxx to define a “large header” and “shrinking header”. Can you help me with that CSS? Or is there a better approach to achieve this?

    Thank you,

    • This topic was modified 4 years, 9 months ago by dumdeldidum. Reason: being more specific
    #1239643

    Good evening, kind follow up on the query above. Any help to solve this would be appreciated. Cheers,

    #1240064

    Good day, I am still trying to figure out a solution to the query above and would appreciate thoughts leading to a solution. Thank you and have a good Sunday,

    #1240206

    Hi,

    Sorry for the delay. You can try this css code in the Quick CSS field or the child theme’s style.css file to limit the height of the header on other pages.

    #top:not(.home) #header .av-logo-container, #top:not(.home) #header .av-logo-container .logo a, #top:not(.home) #header .av-logo-container, #top:not(.home) #header .av-logo-container .logo a img {
    	max-height: 59px !important;
    	height: 59px !important;
    	line-height: 59px !important;
    }
    
    #top:not(.home) #header .av-logo-container .main_menu li a {
    	height: 59px !important;
    	line-height: 59px !important;
    }
    
    #top:not(.home) #main {
    	padding-top: 64px !important;
    }

    Please don’t forget to toggle the Performance > File Compression settings and remove the cache after adding the css code.

    Best regards,
    Ismael

    #1240321

    Thank you Ismael for your help, its a good approach and works on large monitors. However, from a screen width of smaller than 768px, there are styling inconsistencies:

    – logo smaller, logo has space on top, logo and nav bar not same height.

    Would you mind looking at your proposed CSS again to make sure all pages fit the home page’s nav bar look on screens with max-width of 767px.

    Thank you,

    • This reply was modified 4 years, 9 months ago by dumdeldidum.
    #1240378

    you can try it without css settings – so remove the settings from above and see if this will better fit to your needs
    – well i first thought we can do this via child-theme functions.php :

    function av_change_header_layout($header){
        if(!is_front_page()){
          $header['header_custom_size']   =  '45';
          $header['header_shrinking']   =  'disabled';
          $header['header_class'] .= " av_header_shrinking_disabled";
        }
        return $header; 
    }
    add_filter('avf_header_setting_filter','av_change_header_layout');

    but the shrinking disabled does not work – i do not know why?

    but the other way round works

    :
    Set the options like you want to have it for all pages ( but take custom value 45px and non shrinking header )
    then this on child-theme functions.php:

    function av_change_header_layout($header){
        if(is_front_page()){
          $header['header_custom_size']   =  '150';
          $header['header_shrinking']   =  'header_shrinking';
          $header['header_class'] .= " av_header_shrinking";
        }
        return $header; 
    }
    add_filter('avf_header_setting_filter','av_change_header_layout');

    if you like to include another page to that settings – use a page array or any other conditional tags : https://codex.wordpress.org/Conditional_Tags

    • This reply was modified 4 years, 9 months ago by Guenni007.
    #1240380

    By the way dear mods – why does is_home() not working on my test page on that ???
    It is a static page – but does not work – only is_front_page() works ?
    Does Enfold setting of the front-page not influence the home setting?

    #1240948

    Hi,

    According to the documentation is_home depends on the site’s “Front page displays” Reading Settings ‘show_on_front’ and ‘page_for_posts’.

    // https://developer.wordpress.org/reference/functions/is_home/

    Did you set the front or home page in the Settings > Reading panel?

    Best regards,
    Ismael

    #1240999

    Hi Ismael,

    [thank you Guenni007 for jumping in but I would rather like the paid mods to address my issues].

    I dont know why there was no reaction to my follow up as I am interested in solving this with your proposed CSS approach.

    Can you please react to my reply and provide a solution that makes sure all pages fit the home page’s nav bar look on screens with max-width of 767px. See again private content for access data etc.

    Thank you,

    #1241000

    @dumdeldidum: Ok – OK – but even if my solution leads more easily to success?
    After all, with the pre-selection via this filter, Enfold has set all responsive settings.
    By the way, you don’t write about a content width at the top.
    __________

    @ismael

    i know that and wrote that the page on that test page set as “home” page is a static page so is_home() had to work.
    But it does not. So that was my question:

    #1241639

    Hi,

    Thank you Ismael for your help, its a good approach and works on large monitors. However, from a screen width of smaller than 768px, there are styling inconsistencies:

    We can wrap the code inside a css media query so that it doesn’t affect the mobile view, or to keep the default header layout on smaller screens.

    @media only screen and (min-width: 989px) {
      #top:not(.home) #header .av-logo-container, #top:not(.home) #header .av-logo-container .logo a, #top:not(.home) #header .av-logo-container, #top:not(.home) #header .av-logo-container .logo a img {
        max-height: 59px !important;
        height: 59px !important;
        line-height: 59px !important;
      }
    
      #top:not(.home) #header .av-logo-container .main_menu li a {
        height: 59px !important;
        line-height: 59px !important;
      }
    
      #top:not(.home) #main {
        padding-top: 64px !important;
      }
    }
    

    Best regards,
    Ismael

    #1241640

    Hi,


    @Guenni007
    : I might have misread the documentation. Please check this.

    If a static page is set for the front page of the site, this function will return true only on the page you set as the “Posts page”.

    Best regards,
    Ismael

    #1242198

    thanks Ismael – i now read on a page that:

    If the settings under: Dashboard – Settings – Reading-Settings : “Your homepage displays” are left at default then the home page will return true for both is_front_page() and is_home()

    so this was the fact on that test page – i do not know why the setting has been done – because i do always set the “home” only on Enfold Options Dialog.
    If it is set on that Settings-Page is_front_page() is for both true – is_home() is only true for post-list (posts-page).

    That was new to me that there is that dependency if it is set or not on : Dashboard – Settings – Reading-Settings : “Your homepage displays”
    Or over the customizer : Homepage setting.

    • This reply was modified 4 years, 9 months ago by Guenni007.
    #1242824

    Hi,

    Thank you for the clarification. I didn’t know that either until I’ve read the documentation.

    Have a nice day.

    Best regards,
    Ismael

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