WordPress.org
Get WordPress

Plugin Directory

Changeset 2432652


Ignore:
Timestamp:
12/06/2020 05:43:16 PM (5 years ago)
Author:
metricthemes
Message:
  • Fixed Mobile menu toggle not working in editor
  • Added Border for dropdown
  • Added box shadow for dropdown
  • Added padding for menu toggle
Location:
header-footer-composer
Files:
55 added
5 edited

Legend:

Unmodified
Added
Removed

  • header-footer-composer/trunk/README.txt

    r2160525 r2432652  
    55Tags: custom header builder, footer builder, header, footer, elementor, template builder, page builder, landing page header
    66Requires at least: 4.4
    7 Tested up to: 5.2
     7Tested up to: 5.6
    88Requires PHP: 5.6
    9 Stable tag: 1.0.2
     9Stable tag: 1.0.3
    1010License: GPLv2 or later
    1111License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    3838Header Footer Composer currently only works with Elementor.
    3939
     40== Screenshots ==
     41
     421. Navigate to Dashboard >> Appereance >> Header Footer Composer to create a new layout.
     432. Select "Header" from "Choose Layout" dropdown to create Site Header
     443. Select "Footer" from "Choose Layout" dropdown to create Site Footer
     454. Elementor widgets available with Header Footer Composer
     46
    4047== Changelog ==
     48= 1.0.3 =
     49* Fixed Mobile menu toggle not working in editor
     50* Added Border for dropdown
     51* Added box shadow for dropdown
     52* Added padding for menu toggle
     53
    4154= 1.0.2 =
    4255* Fixed Mobile Toggle Layout

  • header-footer-composer/trunk/header-footer-composer.php

    r2160525 r2432652  
    2424 * Plugin URI:        https://github.com/metricthemes/header-footer-composer
    2525 * Description:       Design custom headers and footers for your site using Elementor Page builder.
    26  * Version:           1.0.2
     26 * Version:           1.0.3
     27 * Requires at least: 4.4
     28 * Tested up to:      5.6
     29 * Requires PHP:      5.6
    2730 * Author:            MetricThemes
    2831 * Author URI:        https://metricthemes.com
    … …  
    4346 * Rename this for your plugin and update it as you release new versions.
    4447 */
    45 define( 'HEADER_FOOTER_COMPOSER_VERSION', '1.0.2' );
     48define( 'HEADER_FOOTER_COMPOSER_VERSION', '1.0.3' );
    4649define( 'HEADER_FOOTER_COMPOSER_BASE_URL', plugins_url( '/', __FILE__ ) );
    4750

  • header-footer-composer/trunk/includes/widgets/hfc-navmenu.php

    r2160525 r2432652  
    1010    public function __construct($data = [], $args = null) {
    1111        parent::__construct($data, $args); 
    12         wp_enqueue_style( 'hfc-navmenu-style', HEADER_FOOTER_COMPOSER_BASE_URL . 'public/css/hfc-navmenu.css', [ 'elementor-frontend' ], HEADER_FOOTER_COMPOSER_VERSION, 'all' );                   
    13         wp_enqueue_script( 'hfc-navmenu-script', HEADER_FOOTER_COMPOSER_BASE_URL . 'public/js/hfc-navmenu.js', array( 'jquery' ), HEADER_FOOTER_COMPOSER_VERSION, true );       
     12        wp_register_style( 'hfc-navmenu-style', HEADER_FOOTER_COMPOSER_BASE_URL . 'public/css/hfc-navmenu.css', [ 'elementor-frontend', 'elementor-icons-fa-solid' ], HEADER_FOOTER_COMPOSER_VERSION, 'all' );                 
     13        wp_register_script( 'hfc-navmenu-script', HEADER_FOOTER_COMPOSER_BASE_URL . 'public/js/hfc-navmenu.js', array( 'jquery' ), HEADER_FOOTER_COMPOSER_VERSION, true );     
    1414    }
    1515   
    … …  
    238238                    '{{WRAPPER}} .hfc-navbar, .hfc-nav-menu-top.open' => 'background-color: {{VALUE}}',
    239239                ],
     240                'devices' => [ 'desktop', 'tablet', 'mobile' ],
     241                'desktop_default' => '',
     242                'tablet_default' => '#ffffff',
     243                'mobile_default' => '#ffffff',
    240244            ]
    241245        ); 
    … …  
    364368            ]
    365369        );     
     370       
     371        $this->add_group_control(
     372            Group_Control_Border::get_type(),
     373            [
     374                'name' => 'hfc_nav_menu_style_link_border',
     375                'label' => __( 'Border', 'header-footer-composer' ),
     376                'selector' => '{{WRAPPER}} .hfc-navbar ul.hfc-nav-menu-top li',
     377            ]
     378        );       
    366379       
    367380        $this->add_responsive_control(
    … …  
    539552                'name' => 'hfc_nav_menu_dropdown_style_link_border',
    540553                'label' => __( 'Border', 'header-footer-composer' ),
    541                 'selector' => '{{WRAPPER}} .hfc-navbar ul ul.sub-menu',
     554                'selector' => '{{WRAPPER}} .hfc-navbar ul li ul.sub-menu li',
    542555            ]
    543556        );
    … …  
    577590                ],
    578591            ]
    579         );                             
     592        );             
     593       
     594        $this->add_group_control(
     595            Group_Control_Box_Shadow::get_type(),           
     596            [
     597                'name' => 'hfc_nav_menu_dropdown_style_box_shadow',               
     598                'label' => __( 'Box Shadow', 'header-footer-composer' ),
     599                'selector' => '{{WRAPPER}} .hfc-navbar ul li ul',
     600            ]
     601        );       
    580602               
    581603        $this->end_controls_section();     
    … …  
    596618                'default' => '#ffffff',
    597619                'selectors' => [
    598                     '{{WRAPPER}} .hfc-navbar #menu-button' => 'color: {{VALUE}}',
     620                    '{{WRAPPER}} #hfc-menu-button-toggle .fas' => 'color: {{VALUE}}',
    599621                ],
    600622            ]
    … …  
    608630                'default' => '#191919',             
    609631                'selectors' => [
    610                     '{{WRAPPER}} .hfc-navbar #menu-button' => 'background-color: {{VALUE}}',
     632                    '{{WRAPPER}} #hfc-menu-button-toggle .fas' => 'background-color: {{VALUE}}',
    611633                ],
    612634            ]
    … …  
    643665                ],
    644666                'selectors' => [
    645                     '{{WRAPPER}} .hfc-navbar #menu-button' => 'font-size: {{SIZE}}{{UNIT}};',
     667                    '{{WRAPPER}} #hfc-menu-button-toggle .fas' => 'font-size: {{SIZE}}{{UNIT}};',
    646668                ],
    647669            ]
    … …  
    669691                'default'        => 'none',
    670692                'selectors' => [
    671                     '{{WRAPPER}} .hfc-navbar #menu-button' => 'float: {{VALUE}};',
     693                    '{{WRAPPER}} #hfc-menu-button-toggle .fas' => 'float: {{VALUE}};',
    672694                ],
    673695            ]
    … …  
    686708                'name' => 'hfc_nav_menu_toggle_style_border',
    687709                'label' => __( 'Toggle Border', 'header-footer-composer' ),
    688                 'selector' => '{{WRAPPER}} .hfc-navbar #menu-button',
     710                'selector' => '{{WRAPPER}} #hfc-menu-button-toggle .fas',
    689711            ]
    690712        );     
    … …  
    697719                'size_units' => [ 'px', '%', 'em' ],
    698720                'selectors' => [
    699                     '{{WRAPPER}} .hfc-navbar #menu-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
     721                    '{{WRAPPER}} #hfc-menu-button-toggle .fas' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    700722                ],
    701723            ]
    … …  
    708730                'type' => Controls_Manager::DIMENSIONS,
    709731                'size_units' => [ 'px', '%', 'em' ],
    710                 'selectors' => [
    711                     '{{WRAPPER}} .hfc-navbar #menu-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
     732                'default'   => ['top' => '10', 'right' => '10', 'bottom' => '10', 'left' => '10', 'isLinked' => true,],
     733                'selectors' => [
     734                    '{{WRAPPER}} #hfc-menu-button-toggle .fas' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
    712735                ],
    713736            ]
    … …  
    722745    protected function render() {
    723746        $settings = $this->get_settings();
    724         $hfc_menu_id = $settings[ 'hfc_nav_menu_ed' ];             
     747        $hfc_menu_id = $settings[ 'hfc_nav_menu_ed' ];                 
    725748    ?>         
    726    
     749               
    727750            <nav id="hfc-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">           
     751                <div id="hfc-menu-button-toggle" class=""><i class="fas fa-bars"></i></div>
    728752                <?php
    729753                  wp_nav_menu(array(

  • header-footer-composer/trunk/public/css/hfc-navmenu.css

    r2160525 r2432652  
    77.hfc-navbar ul li,
    88.hfc-navbar ul li a,
    9 .hfc-navbar #menu-button {
     9#hfc-menu-button-toggle {
    1010  margin: 0;
    1111  padding: 0;
    … …  
    2828  height: 0;
    2929}
    30 .hfc-navbar #menu-button {
     30#hfc-menu-button-toggle {
    3131  display: none;
    3232}
    … …  
    6666}
    6767.hfc-navbar > ul > li.menu-item-has-children > a:after {
    68 font-family: FontAwesome;
     68font-family: "Font Awesome 5 Free";
    6969font-style: normal;
    7070font-weight: normal;
    … …  
    9696}
    9797.hfc-navbar li:hover > ul > li {
    98   height: 35px;
     98  height: auto;
    9999}
    100100.hfc-navbar ul ul ul {
    … …  
    106106  margin-right: 100%;
    107107}
    108 .hfc-navbar ul ul li a {
    109   border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    110   width: 170px;
     108.hfc-navbar ul ul li a { 
     109  width: 230px;
    111110  font-size: 14px;
    112111  padding:11px 12px;
    … …  
    177176    text-align: left;
    178177  }
     178    .hfc-navbar ul li ul.sub-menu li:last-child {
     179        border-bottom: none !important;
     180    }
    179181  .hfc-nav-mobile-toggle-ed .hfc-navbar > ul > li.menu-item-has-children > a:after,
    180182  .hfc-nav-mobile-toggle-ed .hfc-navbar > ul > li.menu-item-has-children > a:before,
    … …  
    183185    display: none;
    184186  }
    185   .hfc-nav-mobile-toggle-ed .hfc-navbar #menu-button {
    186     font-family: FontAwesome;
     187  .hfc-nav-mobile-toggle-ed #hfc-menu-button-toggle {
     188    font-family: "Font Awesome 5 Free";
    187189    font-style: normal;
    188190    font-weight: normal;
    … …  
    198200    /* float: right; */
    199201  } 
    200   .hfc-nav-mobile-toggle-ed .hfc-navbar #menu-button.menu-opened {
     202  .hfc-nav-mobile-toggle-ed #hfc-menu-button-toggle.menu-opened {
    201203  z-index:10;
    202204  } 
    203   .hfc-nav-mobile-toggle-ed .hfc-navbar #menu-button.menu-opened:after {
     205  .hfc-nav-mobile-toggle-ed #hfc-menu-button-toggle.menu-opened:after {
    204206    top: 23px;
    205207    border: 0;
    … …  
    213215    transform: rotate(45deg);
    214216  }
    215   .hfc-nav-mobile-toggle-ed .hfc-navbar #menu-button.menu-opened:before {
     217  .hfc-nav-mobile-toggle-ed #hfc-menu-button-toggle.menu-opened:before {
    216218    top: 23px;
    217219    background: #ffffff;
    … …  
    238240  .hfc-nav-mobile-toggle-ed .hfc-navbar .submenu-button:after { 
    239241    content:"\f0d7";
    240     color:#fff;
    241     font-family: FontAwesome;
     242    color:#191919;
     243    font-family: "Font Awesome 5 Free";
    242244    font-style: normal;
    243245    font-weight: normal;
    … …  
    250252    .hfc-nav-mobile-toggle-ed .hfc-navbar .submenu-button:after { 
    251253    margin: 20px 20px;
    252     }
    253     .hfc-nav-mobile-overlay-yes .hfc-nav-menu-top.open {
    254     position:fixed;
    255     height:100vh;
    256     padding-top:16%;
    257254    }
    258255    .hfc-nav-mobile-toggle-ed .hfc-nav-menu-top.open {
    … …  
    261258        top: 0;
    262259        left: 0;
    263     }
     260    }   
     261    .hfc-nav-mobile-overlay-yes .hfc-nav-menu-top.open {
     262        display: block;
     263        position: absolute;       
     264        width: 375px;       
     265    }
     266
    264267}
    265268@media (min-width: 768px) and (max-width: 1024px) {
    … …  
    267270    margin: 20px 20px;
    268271    }
    269     .hfc-nav-mobile-overlay-yes .hfc-nav-menu-top.open {
    270         position:fixed;
    271         height:100vh;
    272         padding-top:16%;
     272    .hfc-nav-mobile-toggle-ed .hfc-nav-menu-top.open {
     273        display: block;
     274        width: 100%;   
     275        top: 0;
     276        left: 0;
    273277    }
    274     .hfc-nav-mobile-toggle-ed .hfc-nav-menu-top.open {
    275             display: block;
    276             width: 100%;   
    277             top: 0;
    278             left: 0;
    279     }
    280   }
     278    .hfc-nav-mobile-overlay-yes .hfc-nav-menu-top.open {   
     279    position: absolute;
     280    width: 720px;
     281    }   
     282  }

  • header-footer-composer/trunk/public/js/hfc-navmenu.js

    r2160525 r2432652  
    1010      }, options);
    1111
    12       return this.each(function() {
    13         cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
    14         $(this).find("#menu-button").on('click', function(){
     12      return this.each(function() {       
     13        $(this).find("#hfc-menu-button-toggle").on('click', function(){
    1514          $(this).toggleClass('menu-opened');
    16           var mainmenu = $(this).next('ul');
     15          var mainmenu = $('ul.hfc-nav-menu-top');
     16           
     17            //adjust width of menu in mobile 
     18            var elementor_section_width = $( '#hfc-navigation' ).closest('.elementor-section').outerWidth();               
     19            var elementor_self_section_width = $( '#hfc-navigation' ).closest('.elementor-column').outerWidth();                   
     20            var self_position = elementor_self_section_width - elementor_section_width - 10;                                             
     21           
     22            mainmenu.css("width", elementor_section_width +'px');
     23            mainmenu.css("left", self_position +'px');                     
     24           
    1725          if (mainmenu.hasClass('open')) {
    1826            mainmenu.hide().removeClass('open');
    … …  
    4755
    4856        resizeFix = function() {
    49           if ($( window ).width() > 768) {
     57          if ($( window ).width() > 768) {                           
    5058            cssmenu.find('ul').show();
    5159          }
    … …  
    6674$(document).ready(function(){
    6775
    68 $(".hfc-nav-mobile-toggle-ed .hfc-navbar").menumaker({
    69    title: "&#xf0c9;",
     76$(".hfc-nav-mobile-toggle-ed #hfc-navigation").menumaker({
    7077   format: "multitoggle"
    7178});
Note: See TracChangeset for help on using the changeset viewer.