Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • May 6, 2020 at 2:04 pm #1210345
    aliyanage

    Hi all,

    I have choosen the hamburger menu für die desktop version but would like to add an additional Menu item which is called “What sets us apart” but not in the hamburger menu but instead right next to the social media icons. The current version can be looked at here: https://bettina.andrewliyanage.com/

    How can I add an additional Menu item outside the Hamburger menu but instead in the header next to the social media items?

    Kind regards,
    Andrew

    May 6, 2020 at 3:47 pm #1210368
    Guenni007

    do you know how to give a custom class to your menu items?

    On Dashboard – Appearance – Menus
    you can see on the top right postion of your browser window a slide-out button : “Screen Options”
    Click that button.

    On “Show advanced menu properties” mark “CSS Classes”

    Then you will have on each menu item an input field for class!

    Enter for your “What sets up appart” a class: menu-item-avia-special
    and see where it is shown on your menu.

    • This reply was modified 4 years, 7 months ago by Guenni007.
    May 6, 2020 at 4:32 pm #1210380
    aliyanage

    Hi Guenni007,

    thanks a lot for the reply and help. I added the class menu-item-avia-special and it disappeared from the menu but didn’t put in anywhere else… see here: https://bettina.andrewliyanage.com/

    Kind regards,
    Andrew

    May 6, 2020 at 4:53 pm #1210388
    Guenni007

    sorry i was sure that on former enfold versions this is a menu-item that stays visible in this manner.

    In addition to the above add to the quick css:

    .html_burger_menu_active .menu-item-avia-special {
    display: block !important;
}

    and if you like to change the positions:

    .av-main-nav li {
    float: right;
}

    maybe here is an important too needed – but test it first without

    • This reply was modified 4 years, 7 months ago by Guenni007.
    May 7, 2020 at 6:54 am #1210617
    Rikard

    Hi,

    Thanks for helping out @guenni007, did you try that out and did you have any luck with it @aliyanage?

    Best regards,
    Rikard

    May 7, 2020 at 10:18 am #1210665
    aliyanage

    Wow thanks @guenni007, worked out really well… learned a few new things :-D
    This helped a lot, put the changes up again. I would like to add the “Kontakt” Menu item to the Social Media Icons part and put the “What Sets us Apart” Button after that. If any of you would know how to do so I would be very thankful to know, if not I will fiddle around :-)
    see the result here: https://bettina.andrewliyanage.com/

    Thanks again.

    May 7, 2020 at 1:50 pm #1210714
    Guenni007

    you have to let them on float right but just move the position in your menu ( drag & drop )

    but you have to find a way to have that site responsive.
    Your logo setting and hamburger settings did not realy work on mobiles.

    The other thing is the handling of tables. You can achieve that layout without table setting too.

    • This reply was modified 4 years, 7 months ago by Guenni007.
    May 7, 2020 at 2:03 pm #1210719
    aliyanage

    Hi Guenni007,

    you mean the table on the first page? The goal design here is to have the following: https://bettina.andrewliyanage.com/goal-table-design/

    But when trying to do so with the layout elements I can’t align the lines to be on the same height :-(

    May 8, 2020 at 9:52 am #1210961
    Guenni007

    hm – that is more complex than i thought:

    please have a look at the proposal here; and test the responsive behaviour by shrinking the screen width.
    https://webers-testseite.de/covid-beyond/

    the colors on the right are only to show you the dimensions of the containers.
    It is easy to get rid of them.

    May 8, 2020 at 1:18 pm #1211015
    aliyanage

    wooow, @guenni007 that is awesome, that is perfect behaviour. Did you do that using the page builder? That would be perfect

    May 8, 2020 at 4:44 pm #1211083
    Guenni007

    this at the end of the answer is the enfold shortcode for that grid-row with all classes and IDs preset.
    you can insert that on an empty page in the debug modus field.

    You know how to activate the debug mode?
    this to child-theme functions.php

    // Debug Modus Enfold
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug(){
  return "debug";
}

    the only thing to mention is that i use the little plugin of Günter here from the dev team : avia-special-characters
    to have special characters on input fields – that is the #amp# for the ampersand.

    next to know is my little snippet to use the grid-row alb not as full-width layout element:
    to child-theme functions.php:

    function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1510px", "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

    you have to synchronize the 1510px to your setting ( on your page it is 1440px )

    and then a lot of flex-box model css for your quick css.
    i use on the grid-row an ID : covid-beyond
    and a custom-class for not full-width: grid-notfull

    /*******************************************/
/****** covid fields responsive behavior *****/
/*******************************************/
#covid-beyond {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: stretch;
    background: transparent !important
}

#covid-beyond .av-subheading_below {
      margin-top:0.3em;
}

#covid-beyond .flex_cell.cell-one, 
#covid-beyond .flex_cell.cell-two, 
#covid-beyond .flex_cell.cell-three, 
#covid-beyond .flex_cell.cell-four {
    display: flex !important;
    width: unset !important;
    flex: 1 1 23%;
    margin: 0 !important;
    padding: 1% !important;
}

#covid-beyond .flex_cell.cell-one .flex_cell_inner ,
#covid-beyond .flex_cell.cell-two .flex_cell_inner ,
#covid-beyond .flex_cell.cell-three .flex_cell_inner ,
#covid-beyond .flex_cell.cell-four .flex_cell_inner {
  display: flex !important;
  flex-flow: column wrap;
  justify-content: space-between;
}

#covid-beyond .flex_cell.cell-one .flex_cell_inner .flex_column,
#covid-beyond .flex_cell.cell-two .flex_cell_inner .flex_column,
#covid-beyond .flex_cell.cell-three .flex_cell_inner .flex_column,
#covid-beyond .flex_cell.cell-four .flex_cell_inner .flex_column {
  flex: 1 1 auto;
  border: solid #aaa;
  border-width: 2px 0
}

/******* comment this out if you don't like the bottom margin on the smaller columns *****/
#covid-beyond .flex_cell.cell-three .flex_cell_inner .flex_column:first-child, 
#covid-beyond .flex_cell.cell-four .flex_cell_inner .flex_column:first-child {
    margin-bottom: 20px;
}

#covid-beyond .flex_cell_inner .flex_column:nth-child(2) {
  margin-top: -2px !important;
}

#covid-beyond .flex_column {
    min-height: 250px;
}

#covid-beyond .cell-one .flex_column {
  background-color: transparent !important;
}

#covid-beyond .cell-one .flex_cell_inner {
  background: linear-gradient(rgba(235,134,78,0.18),rgba(235,134,78,0.6)) !important;
}

#covid-beyond .avia-button-wrap {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/***************  Media Querries *************************/
@media only screen and (max-width:1085px) {
  #covid-beyond .flex_cell.cell-one  {
      flex: 1 1 100%;
  }
  #covid-beyond .flex_cell.cell-two, 
  #covid-beyond .flex_cell.cell-three, 
  #covid-beyond .flex_cell.cell-four {
      flex: 1 1 33.29%;
  }
  #covid-beyond .cell-one .flex_cell_inner {
    width: 100%;
  }
} 

@media only screen and (max-width:930px) {
  #covid-beyond .flex_cell.cell-one, 
  #covid-beyond .flex_cell.cell-two, 
  #covid-beyond .flex_cell.cell-three, 
  #covid-beyond .flex_cell.cell-four  {
      flex: 1 1 49%;
  }
  #covid-beyond .flex_cell.cell-two .flex_cell_inner .flex_column {
      border-width: 2px 0 0;
  }
} 

@media only screen and (max-width:767px) {
  #covid-beyond {
      justify-content: space-evenly;
  }
  #covid-beyond .flex_cell.cell-one, 
  #covid-beyond .flex_cell.cell-two, 
  #covid-beyond .flex_cell.cell-three, 
  #covid-beyond .flex_cell.cell-four {
      flex: 1 1 100%;
  }
  #covid-beyond .flex_cell.cell-two .flex_cell_inner .flex_column, 
  #covid-beyond .flex_cell.cell-three .flex_cell_inner .flex_column, 
  #covid-beyond .flex_cell.cell-four .flex_cell_inner .flex_column {
      border-width: 0 0 2px 0;
  }
  .responsive #top .container #covid-beyond .av-content-small, 
  .responsive #top #wrap_all #covid-beyond .flex_column, 
  .responsive #top #wrap_all #covid-beyond .av-flex-cells .no_margin {
          margin-bottom: 0px;
  }
    
  .responsive #top #wrap_all #covid-beyond.av-flex-cells .no_margin {
      padding-left: 20px !important;
      padding-right: 20px !important;
  }
  #covid-beyond .flex_column {
      min-height: 150px !important;
  }
}

    the shortcodes for that grid-row

    [av_layout_row border='' min_height_percent='' min_height_pc='25' min_height='0' color='main_color' mobile='av-flex-cells' mobile_breaking='av-break-at-tablet' id='covid-beyond' custom_class='grid-notfull big-screens' aria_label='' av_element_hidden_in_editor='0' av_uid='av-1jw1sp']
[av_cell_one_fourth vertical_align='top' padding='20px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' custom_class='cell-one' av_uid='av-huwh']

[av_one_full first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' link='' linktarget='' link_hover='' padding='20px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background='bg_color' background_color='#ffffff' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-6na81d' custom_class='']

[av_heading heading='COVID-Beyond' tag='h2' link='' link_target='' style='blockquote modern-quote' size='' subheading_active='subheading_below' subheading_size='15' margin='' padding='10' color='' custom_font='' custom_class='' id='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-2sx44h3'][/av_heading]

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' av_uid='av-2wp1dvr' admin_preview_bg='']
Krise als Chance zum Neuanfang auf höherer Ebene
[/av_textblock]

[/av_one_full][/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='20px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' custom_class='cell-two' av_uid='av-wk8rt']

[av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='20px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#f8edff' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-65k3td']

[av_heading heading='Leaders #amp# Organisationen' tag='h3' link='' link_target='' style='blockquote modern-quote' size='' subheading_active='subheading_below' subheading_size='15' margin='' padding='10' color='' custom_font='' custom_class='' id='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-2n5g4o7'][/av_heading]

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' av_uid='av-2g5fcav' admin_preview_bg='']
Zukunftsbild und Strategie. Komplexität auf den Punkt. Treffende Entscheidungsfindung.

Entwicklung at once;
Persönlichkeit, Team, Leadership, Kultur, Organisation und Realität
[/av_textblock]

[/av_one_full][/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='20px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' custom_class='cell-three' av_uid='av-12q1c9']

[av_one_full first min_height='' vertical_alignment='av-align-top' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='20px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#fffae0' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-5obfoh']

[av_heading heading='Leaders’ Familien #amp# Freunde' tag='h3' link='' link_target='' style='blockquote modern-quote' size='' subheading_active='subheading_below' subheading_size='15' margin='' padding='10' color='' custom_font='' custom_class='' id='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-25d8pvr'][/av_heading]

[av_button label='Click me' icon_select='yes-right-icon' icon='ue832' font='entypo-fontello' size='small' position='right' label_display='' title_attr='' color='silver' custom_bg='#444444' custom_font='#ffffff' link='manually,http://' link_target='' id='' custom_class='' av_uid='av-k9xvb024' admin_preview_bg='']

[/av_one_full][av_one_full first min_height='' vertical_alignment='av-align-bottom' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='20px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#edf8ff' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-440hrt']

[av_heading heading='Individuen, Paare, Familien, Coaches #amp# Consultants' tag='h3' link='' link_target='' style='blockquote modern-quote' size='' subheading_active='' subheading_size='15' margin='' padding='10' color='' custom_font='' custom_class='' id='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-1t8tzgn'][/av_heading]

[av_button label='Click me' icon_select='yes-right-icon' icon='ue832' font='entypo-fontello' size='small' position='right' label_display='' title_attr='' color='silver' custom_bg='#444444' custom_font='#ffffff' link='manually,http://' link_target='' id='' custom_class='' av_uid='av-k9xvb024' admin_preview_bg='']

[/av_one_full][/av_cell_one_fourth][av_cell_one_fourth vertical_align='top' padding='20px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' custom_class='cell-four' av_uid='av-tjj6x']

[av_one_full first min_height='' vertical_alignment='av-align-top' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='20px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#ffe8ef' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-4zyukx']

[av_heading heading='Methoden der Zukunft #amp# Strategische Intuition' tag='h3' link='' link_target='' style='blockquote modern-quote' size='' subheading_active='' subheading_size='15' margin='' padding='10' color='' custom_font='' custom_class='' id='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-13ft747'][/av_heading]

[av_button label='Click me' icon_select='yes-right-icon' icon='ue832' font='entypo-fontello' size='small' position='right' label_display='' title_attr='' color='silver' custom_bg='#444444' custom_font='#ffffff' link='manually,http://' link_target='' id='' custom_class='' av_uid='av-k9xvb024' admin_preview_bg='']

[/av_one_full][av_one_full first min_height='' vertical_alignment='av-align-bottom' space='no_margin' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='20px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#f2ffe5' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-4llc6h']

[av_heading heading='Lern-Community der HyperTransformatoren, Frühaufstehern #amp# Rulebreakern' tag='h3' link='' link_target='' style='blockquote modern-quote' size='' subheading_active='' subheading_size='15' margin='' padding='10' color='' custom_font='' custom_class='' id='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-6mpmv'][/av_heading]

[av_button label='Click me' icon_select='yes-right-icon' icon='ue832' font='entypo-fontello' size='small' position='right' label_display='' title_attr='' color='silver' custom_bg='#444444' custom_font='#ffffff' link='manually,http://' link_target='' id='' custom_class='' av_uid='av-k9xvb024' admin_preview_bg='']

[/av_one_full][/av_cell_one_fourth]
[/av_layout_row]
    May 8, 2020 at 10:11 pm #1211255
    Guenni007

    i transfered it this way to another playground: https://webers-testseite.de/pureinstall/tada/
    and changed abit the css and had to adjust the media querry breakpoints due to different font-sizes etc. pp

    May 9, 2020 at 8:33 am #1211361
    aliyanage

    Hi Guenni007,

    thanks a ton that is so much help you gave me here… I will try to implement this on the site today. Thank again so much Günter.

    Kind regards,
    Andrew

    May 9, 2020 at 1:23 pm #1211384
    aliyanage

    Hi @Guenni007,

    thanks a mill I’ve just added the Covid part and it works really well, I will now change colors of borders etc. I’ve also sent you an email to (Email address hidden if logged out) in case you would be interested, please let me know.

    Kind regards,
    Andrew

    May 9, 2020 at 1:43 pm #1211386
    aliyanage

    Hi @guenni007,

    Can you tell me how I can change the visibility and colors of the borders? Also in the quarter boxes meaning the area where there are 2 boxes per column, how can I remove one border in order to just have one borderline instead of two in the middle?

    Kind regards,
    Andrew

    May 10, 2020 at 7:10 am #1211598
    Guenni007

    if you comment this out or get rid of it:
    see comment in css above:
    /******* comment this out if you don’t like the bottom margin on the smaller columns *****/

    #covid-beyond .flex_cell.cell-three .flex_cell_inner .flex_column:first-child, #covid-beyond .flex_cell.cell-four .flex_cell_inner .flex_column:first-child {
    margin-bottom: 20px;
}

    these two 1/1 will have no distance to each other.

    the rule:

    #covid-beyond .flex_cell_inner .flex_column:nth-child(2) {
    margin-top: -2px !important;
}

    will shift the two border – one over the other
    but in principle you can control each border individually.
    border-width: 2px 0 means border-width above and below 2px ; left and right 0. the nomenclature works as usual
    border-width: upper right bottom left
    and the border-color is the analog sequence
    border-color: red blue green yellow

    May 19, 2020 at 10:14 am #1214256
    Guenni007

    coming back to you – looks nice but there is one thing i would remark:

    if you see the screen-width when the columns are 1/2 the top right is smaller due to inner content.

    add to the one rule the width setting to 100%

    #covid-beyond .flex_cell.cell-one .flex_cell_inner, 
#covid-beyond .flex_cell.cell-two .flex_cell_inner, 
#covid-beyond .flex_cell.cell-three .flex_cell_inner, 
#covid-beyond .flex_cell.cell-four .flex_cell_inner {
    display: flex !important;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;   
}

    and have a look on the one media-query set on 930px
    i guess for your setting it will be better to have this on 989px:

    @media only screen and (max-width:989px) {
 #covid-beyond .flex_cell.cell-one,
 #covid-beyond .flex_cell.cell-two,
 #covid-beyond .flex_cell.cell-three,
 #covid-beyond .flex_cell.cell-four {
  flex:1 1 49%
 }
 #covid-beyond .flex_cell.cell-two .flex_cell_inner .flex_column {
  border-width:2px 0 0
 }
}
    May 21, 2020 at 4:47 am #1214875
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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