Okay
  Public Ticket #888733
Add top menu widget to the standard menu
Closed

Comments

  •  2
    Magnus started the conversation

    Hi!


    I wonder if it´s possible to add a top menu widget to the left of the standard menu - where I can display contact info such as phone number, mail etc?

    Also is it possible to add the search function to the standard menu?


    Best regards
    Magnus

  • [deleted] replied

    Hi Magnus,

    I understand your question and we have not implemented search functionality in header menu yet. However we are in the process of implementing this functionality, our designer has designed this page already:


    (view large version)

    To add the search functionality in the menu (hard fix) please add the following code:

    <style>
        .search-input-menu {
            float: right;
            margin-right: -15px;
            margin-left: 25px;
            z-index: 10000;
            position: relative;
            pointer-events: all;
        }
        
        .search-input-menu .search-input {
            position: absolute;
            right: -10px;
            top: -8px;
            width: 200px;
            visibility: hidden;
            opacity: 0;
            transform: scale(0);
            transform-origin: right center;
        }
        
        .input-visible.search-input-menu .search-input {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
        
        .search-input-menu .search-input input[type="submit"] {
            display: none;
        }
        
        .search-input-menu .open-search {
            font-size: 18px;
            color: #333;
        }
        
        .search-input-menu .open-search:after {
            display: none;
        }
    </style>
    <script type="text/javascript">
        jQuery( document ).ready( function( $ ) {
            $( ".search-input-menu a" ).on( 'click', function( ev ) {
                ev.preventDefault();
                var $parent = $( this ).parent();
                
                $parent.toggleClass( 'input-visible' );
                setTimeout( function() {
                    $parent.find( '.form-control' ).focus();
                }, 200 );
            } );
        } );
    </script>
    <div class="search-input-menu">
        
        <div class="search-input transall">
            <?php get_search_form( true ); ?>
        </div>
        
        <a href="#" class="open-search">
            <i class="fa fa-search"></i>
        </a>
    </div>

    And then add this code in: wp-content/themes/kalium/tpls/header-main.php on line 283 after "menu-bar" item:

    (view large version)

    This is what I can offer for you, for more you must utilize this code.

    As for contact info, can you please show me how do you want to add that information, probably send me a sketch how that info should be displayed and I will provide you a solution.

  •  2
    Magnus replied

    Hi Arlind! Thanx for your reply.

    Here´s a sketch of  the contact info in header.

    I´m also having this problem to translate the string: "show more" for the portfolio listing on the home page.
    I have installed Loco Translate and it works fine on all the other strings. What should I do.
    I have searched for this string in the code to do a hard fix but haven´t been able to find it.
    What to do?


  • [deleted] replied

    Hi Magnus,

    I am going to need to add these by myself to you host, so I need your access. 

    Before sending me the info, please update kalium to the latest version available.

    Can you please share your FTP credentials here, because I need to login to your site and test this issue. Your information is safe here (private) in this thread.

    Make sure to choose Private Reply when you send us sensitive information!

  •   Magnus replied privately
  • [deleted] replied

    Hi Magnus,

    After adding the following code functions.php

    // Contact info in the header
    add_action( 'kalium_header_main_before_logo', function() {
    ?>
    <style>
    .logo-and-menu-container {
    position: relative;
    }

    .header-contact-info {
    position: absolute;
    right: -10px;
    top: -15px;
    }

    .header-contact-info,
    .header-contact-info a {
    color: #fff;
    }

    .header-contact-info span {
    display: inline-block;
    margin: 0 5px;
    }

    .header-contact-info i {
    display: inline-block;
    margin-right: 5px;
    }

    .header-contact-info .social i {
    margin: 0;
    }

    .header-contact-info .social a.fb {
    margin-right: 10px;
    }
    </style>
    <div class="header-contact-info">
    <span class="phone">
    <i class="fa fa-phone"></i>
    08-641 45 00
    </span>

    <span class="email">
    <i class="fa fa-envelope"></i>
    <a href="mailto:[email protected]">[email protected]</a>
    </span>

    <span class="social">
    <a href="#fbUrl" target="_blank" class="fb">
    <i class="fa fa-facebook"></i>
    </a>
    <a href="#twUrl" target="_blank" class="tw">
    <i class="fa fa-twitter"></i>
    </a>
    </span>
    </div>
    <?php
    } );

    You only have to place your own twitter and facebook url (#twUrl #fbUrl)

  •  2
    Magnus replied

    Hi again Arlind!

    I´m having a new problem to solve.

    There´s some white space/margin below the Revolution Slider on our first page (www.flertal.se).
    I´ve tried to set the bottom margin of the row to 0px but it just won´t work. How can I fix this?

    Best regards
    Magnus



  • [deleted] replied

    Hi Magnus,

    Can you please add the code below to Custom CSS

    body.home .wpb_revslider_element.wpb_content_element {
    margin-bottom: 0px !important;
    }

    P.S: If you have your further issues; kindly open a new ticket and post your request so it will be helpful for the other users to take advantage of searching them on the forum, and we’re glad to help you in your new thread. 

    Will set this ticket as solved from here.