Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1487307

    For the site’s homepage, we’d like the “burger” icon on the left and the logo on the right, preferably in the center (https://img.savvyify.com/image/01-Homepage.y9tpL).
    For all other pages, we’d like the sidebar menu on the left (https://img.savvyify.com/image/02-All-pages.yy86x).
    As you can see from the images, we can obviously do this in the theme settings, but one excludes the other.
    So, either only at the top or only on the left.
    Is there a way to achieve the result we want?
    And when using the “burger” icon, is it possible to open the menu on the left instead of the right (https://img.savvyify.com/image/01-Homepage-b.yy905)?

    #1487316

    Hey icarogioiosi,

    Thank you for the inquiry.

    This is possible but it will require significant modifications that are beyond the scope of support. You may need to hire a freelance developer or contact Codeable.

    -— https://kriesi.at/contact/customization

    You’ll find the css rules for the left header in the themes/enfold/css/layout.css file around line 632.

    
    /*sidebar headers*/
    .html_header_sidebar{}
    
    .... more styles 
    

    Best regards,
    Ismael

    #1487328

    Thanks for the reply.
    Is it possible to at least have a homepage without a menu and possibly without a logo?
    Regards

    #1487332

    Hi,

    Thanks for the update. You can hide the header for each page if you like, you can find the settings in the Layout menu while editing the page in question.

    Best regards,
    Rikard

    #1487347

    Thanks for your time.
    I’ve tried, but those settings are only available for layouts with a main menu placed at the top.
    As anticipated at the beginning, for all other pages we’d like the sidebar menu on the left.

    #1487348

    And when using the “burger” icon, is it possible to open the menu on the left instead of the right (https://img.savvyify.com/image/01-Homepage-b.yy905)?
    I send you a private link as an example of what we would like to do

    #1487366

    Hi,

    Thank you for the update.

    You can add this css code to reverse the burger menu animation from left to right.

    .html_av-overlay-side .av-burger-overlay-scroll {
        width: 500px;
        transform: translateX(-500px);
        left: 0;
        right: auto;
    }
    

    For the home page, you can try this css code to completely hide the header.

    .home #header 
        display: none;
    }

    Best regards,
    Ismael

    #1487380

    Hi Ismael.
    Thanks for your input.
    I did a quick check, and the burger menu code seems to resolve the issue.
    Regarding the “CSS code to completely hide the header”… it doesn’t seem to work with either the left menu (which is what we’d like to use) or the top menu/header.

    #1487386

    well you got a page like this for your layout: https://kriesi.at/themes/enfold-photography/

    try:

    @media only screen and (max-width:767px) {
      #top .av-logo-container .inner-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "nav logo";
      }
    
      #top .av-logo-container:after,
      #top .av-logo-container .av-sidebar-social-container {
        background-color: gray;
      }
    
      .responsive #top #header .logo {
        grid-area: logo;
        width: unset !important;
        justify-self: end;
      }
    
      .responsive #top #wrap_all .main_menu {
        grid-area: nav;
        justify-self: start;
        width: unset !important;
        left: 0;
        right: unset;
        position: relative;
      }
    }
    
    /* === change the width values to your needs f.e. 500px instead of 350px  === */
    /* === burger slide-out from the leftside === */
    
    .av-burger-overlay-scroll {
      width: 350px;
      left: -350px;
      max-width: 100%;
      transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
    }
    
    .html_av-overlay-side .av-burger-overlay-scroll {
      left: 0;
      max-width: 100%;
      transform: translateX(-350px);
      transition: all 0.5s cubic-bezier(0.75,0,0.25,1);
    }
    
    /* === hide header on home page === */
    
    @media only screen and (min-width:768px) {
      .html_header_sidebar #top.home #header {
        display: none !important;
      }
    
      .html_header_left #top.home #main {
        margin-left: -2px !important;  /* === to ensure there aren't any white flashes on the left  === */
        position: relative;
      }
    }
    #1487408

    Hi,

    the top menu/header.

    We may need to view the site and inspect the elements. Please provide the site URL in the private field.

    Best regards,
    Ismael

    #1487409

    ok – if you like to have on default a sidebar header – and on homepage only the header top position.
    ( for that scenario we need than a bit different css too if you like to have slide-out from left to right)

    1 set your enfold child to header top and make all your decisions you like to have for that header ( height, logo left or right, navigation position, shrink or not, etc pp )

    2 Go to your homepage editor and make your decision there – f.e. if it should have transparency etc.

    3 Look now to your homepage with dev tools of your browser. Note your ID of that page and look what classes are set on #header
    e.g.: ( all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled )

    4 now switch back to your header left position.

    put this to your child-theme functions.php:

    (remove options you do not need – or replace – f.e. header_size and header_custom_size and replace by header_size: ‘slim’ / or large )
    you can find those corresponding header settings in : avia_header.php

    function av_change_header_style($header){
      if(is_page(array( 17, 123456))){ 
        $header['header_position']    = "header_top";
        $header['header_layout']      = 'logo_right main_nav_header menu_left';
        $header['header_size']        = 'custom';
        $header['header_custom_size'] =  140;
        $header['header_shrinking']   = 'header_shrinking';
        $header['header_sticky']      = 'header_sticky';
        $header['header_unstick_top']   = 'header_unstick_top';
        $header['header_stretch']     = 'header_stretch';
        $header['header_transparency']  = 'header_transparency header_glassy';
    
        $header['header_class'] = " all_colors header_color light_bg_color av_header_top av_logo_right av_main_nav_header av_menu_left av_custom av_header_sticky av_header_shrinking av_header_stretch av_mobile_menu_tablet av_header_searchicon av_header_unstick_top_disabled av_bottom_nav_disabled av_header_border_disabled";
      }
      return $header; 
    }
    add_filter('avf_header_setting_filter','av_change_header_style');

    here in this example there are two pages (ID’s) replaced with that different layout – adjust to your home page ID
    this filter has a lot more options. Enter on $header['header_class'] your noted classes from point 3.

    see example page: https://clean.webers-testseite.de/

    #1487499

    Thanks Guenni007!
    Your suggestion with the code to hide the left bar was crucial.

    /* === hide header on home page === */

    @media only screen and (min-width:768px) {
    .html_header_sidebar #top.home #header {
    display: none !important;
    }

    .html_header_left #top.home #main {
    margin-left: -2px !important; /* === to ensure there aren’t any white flashes on the left === */
    position: relative;
    }
    }

    Is it possible to apply this somehow to the maintenance page as well?

    Furthermore, your example page (https://clean.webers-testseite.de/) is more or less what we’d like to achieve.
    We’re testing the code you kindly provided to find the best possible solution.
    I congratulate you for accurately understanding our request and identifying such effective solutions.

    #1487939

    check what page-id is your maintenance page include that ID to the conditional tag above
    if(is_page(array( 17, 123456))){
    or is it one you created with a plugin?

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