Flatsome Side Menu Fixed with plugin ACF Pro

15 Jun 2020
0 Comments

In UX Blocks click add new post : Side Menu Fixed

In Custom Fields add new field with import JSON

markup Donate
                
                    
[
    {
        "key": "group_5ee721564d249",
        "title": "Side Menu Fixed Field",
        "fields": [
            {
                "key": "field_5ee721dd5c42b",
                "label": "Side Menu Fixed",
                "name": "side_menu",
                "type": "repeater",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "collapsed": "",
                "min": 0,
                "max": 0,
                "layout": "row",
                "button_label": "",
                "sub_fields": [
                    {
                        "key": "field_5ee7390b0decf",
                        "label": "icon",
                        "name": "icon",
                        "type": "image",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "return_format": "array",
                        "preview_size": "medium",
                        "library": "all",
                        "min_width": "",
                        "min_height": "",
                        "min_size": "",
                        "max_width": "",
                        "max_height": "",
                        "max_size": "",
                        "mime_types": ""
                    },
                    {
                        "key": "field_5ee739370ded0",
                        "label": "title",
                        "name": "title",
                        "type": "text",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "placeholder": "",
                        "prepend": "",
                        "append": "",
                        "maxlength": ""
                    },
                    {
                        "key": "field_5ee739540ded1",
                        "label": "link",
                        "name": "link",
                        "type": "text",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "maxlength": "",
                        "placeholder": "",
                        "prepend": "",
                        "append": ""
                    },
                    {
                        "key": "field_5ee7425204185",
                        "label": "target",
                        "name": "target",
                        "type": "true_false",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "message": "",
                        "default_value": 0,
                        "ui": 1,
                        "ui_on_text": "New window",
                        "ui_off_text": "Same window"
                    }
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "post",
                    "operator": "==",
                    "value": "2983"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "left",
        "instruction_placement": "label",
        "hide_on_screen": [
            "the_content"
        ],
        "active": true,
        "description": ""
    }
]
                
            
                
                    
<?php
add_action("wp_footer", "side_menu_fixed");
function side_menu_fixed()
{
    $queried_post = get_page_by_path('link-icon-fixed', OBJECT, 'blocks');
    if ($queried_post):
        ?>
        <?php if (have_rows('side_menu',$queried_post->ID)): ?>

        <ul class="side-menu-fixed">

            <?php while (have_rows('side_menu',$queried_post->ID)): the_row();
                // vars
                $image = get_sub_field('icon',$queried_post->ID);
                $title = get_sub_field('title',$queried_post->ID);
                $link = get_sub_field('link',$queried_post->ID);
                $target = get_sub_field('target',$queried_post->ID);

                ?>
                <li>
                    <?php if ($link): ?>
                    <a href="<?php echo $link; ?>" title="<?php echo $title?>" <?php if ($target) echo 'target="_blank"'?>>
                        <?php endif; ?>
                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>"/>
                        <?php if ($link): ?>
                    </a>
                <?php endif; ?>
                </li>
            <?php endwhile; ?>
        </ul>

    <?php endif; ?>
    <?php endif; ?>
    <?php
}
                
            
                
                    
//side-menu-fixed
.side-menu-fixed{
  position: fixed;
  top: 50%;
  right: 0;
  list-style: none;
  z-index: 9999;
  transform: translateY(-50%);
  li{
   a{
     background-color: $brown1;
     padding: 10px 5px;
     text-align: center;
     display: block;
     &:hover{
       opacity: 0.8;
     }
   }
  }
}
                
            

Leave a Reply

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.