Search Results for 'mobile menu'

  • Rvdh
    Participant

    Good day, my mobile version seems completely wrong??

    It is not responsive? Please help?  I need it to look like the DEMO version?
    View site here:  https://blackseacollective.com/

    1. Homepage is not showing slider?
    2. Site can move to the right? Def not responsive
    3. Sunglasses / Accesories section images on homepage seem to be cut off?
    4.  Burger Menu is not working?
    5. Cart is not showing?
    6. Search block in the middle of the screen / looks out of place?
    7. Single Product Images not showing on mobile??
    8. Icons not loading on mobile?
    see screenshot – https://prntscr.com/t2rhgk  and
    https://prntscr.com/t2rht6

    rebeccaolson
    Participant

    Hello – The footer has disappeared from my site after the most recent update (I just noticed it.) I have deactivated/reactivated all the plugins, and that is not the issue. I ensured that the footer still appears with correct settings in the Appearance>Menu section (it does). The footer is still correctly set to appear within the Tower>Footer Options. When I switched themes, the footer re-appeared, so this is a theme related issue.

    You can see the issue if you visit my real site, or the staging site, which you have access to.

    I do have custom code for the footer, making the 3rd and 4th columns invisible on mobile:
    .footer_wrapper .row-fluid .span3:nth-child(3) { display: none;}
    .footer_wrapper .row-fluid .span3:nth-child(4) { display: none;}

    Otherwise, I have no other custom coding related to the footer.
    Thanks!
    Rebecca

    vaclav
    Participant

    Hello

    can you help me please, where I can change backgroud hamburger menu in mobile version?

    Screenshot is here 

     

    Thank you

     

    Vaclav

     

     

    Manu
    Participant
    This reply has been marked as private.
    Manu
    Participant

    Hello,

    I am trying to find the CSS code so that in mobile mode the same color is displayed as on a desktop computer. I tried to find it with the Chrome inspector but to no avail. Which CSS code to use to have the same color on mobile?

    Thank you for your help. Regards,

    Emmanuel

    https://drive.google.com/file/d/17jabZstC-fEfRmG67Fnj9uJacxuSXYJE/view?usp=sharing

    mrrajsoni
    Participant

    Hello,

    Whenever I turn on the STICKY NAV option on a mobile device i.e. <span style=”color: #555d66; font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen-Sans, Ubuntu, Cantarell, ‘Helvetica Neue’, sans-serif; font-size: 13px; background-color: #eeeeee;”>Sticky on Responsive</span><span class=”description” style=”font-size: 13px; font-style: italic; margin-top: 7px; color: #555d66; font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen-Sans, Ubuntu, Cantarell, ‘Helvetica Neue’, sans-serif; background-color: #eeeeee;”>Switch on to active sticky header on responsive</span> the menu can’t be scrolled down properly. Its like only the top few navigation links are visible as per screen height nothing below that is scrollable since the header is positioned fixed.

    There is no problem when STICKY NAV is turned off. Could you see it?

    Link – chasehughes.com

    blazinbakery
    Participant

    Just installed yesterday to a clean WP install and ran the completely set up wizard from codeless so everything is straight out of the box, it’s just not working. Every homepage on mobile freezes, they slider starts to load. I disabled it on small small screens but trying on iPhone X which should be fine and slider freezes every time.

    Even disabling the slider the hamburger menu is still frozen, the cart is clickable but has no icon, user registration and SM icons are also not showing on mobile.

    I have tried multiple headers in the wizard and they are all non-functional on mobile, chrome and safari.

    I read the it could be mega menu in knowledge base. disable/enabled no difference.

    Went to update to latest version of June and won’t even update, stuck on 1.8.1 also tried chrome safari on desktop.

    I believe this template took a brand new install of WP and broke it.

    It is also ridiculously slow to the point of timeout errors. I checked status and will attempt PHP adjustments with host but thinking there is more then this.

    Multistore setup. Just starting to build first store using parent theme, have never used child. Running WP 5.4.1

    blazinbakery.blazinbrands.com

     

     

     

     

     

     

    Eldo
    Keymaster

    Hello,

    Specular doesn’t have this solution for the moment. So you can’t different menu for different pages. We are working on a new update to add this features and a lot more.

    The hamburger menu will become white if you change the header color to light.

    Edit the page home page go to Page General Settings > Page Options & Styles > Header Color Style > Light

    You can also edit it manually by editing the line css/bootstrap-responsive.css file:

    @media (max-width: 979px)
    .background--dark nav .menu > li > a, .background--dark header#header .header_tools .vert_mid > a, .background--dark header#header .header_tools .vert_mid .cart .cart_icon, .background--dark .slicknav_btn:after, .background--dark .mobile_small_menu {
        color: #222 !important;
    }

    replace with:

    @media (max-width: 979px)
    .background--dark nav .menu > li > a, .background--dark header#header .header_tools .vert_mid > a, .background--dark header#header .header_tools .vert_mid .cart .cart_icon, .background--dark .slicknav_btn:after, .background--dark .mobile_small_menu {
        color: #222;
    }

    Yes we will take in consideration this but sometimes the users share private credentials and private links that don’t want to be public.

    Regards!

    iclemens
    Participant

    How is it possible to make my custom menu, which I assigned to particular pages act as the mobile menu which can be accessed through the mobile hamburger menu?

    Basically the custom menu replicates the main menu but uses some different links due to anchor usage.

    The custom menu works fine when in standard view but with smaller sizes the mobile menu appears which replaces the main menu but features the wrong links.

    Maybe this can be solved differently.
    The main menu is mostly linking to anchors on the home page. But some menu items are directing to subpages and of course then the anchors don’t work.
    If I use absolute paths for the links rather than just the anchors the page always reloads on the front page instead of just scrolling.

    Second question: How can I style the color of the hamburger menu. By default I have a dark background for the main menu and a black hamburger icon doesn’t help. I have tried several css overrides but they all don’t work.

    General feedback: This forum could be very helpful if there wouldn’t be so many answers marked private but which contain helpful information. Looking for a solution there are quite some questions which indicate what I am looking for but with the answer marked as private there is little use.

    Thanks for any help regarding the matter.
    The URL is: https://www.braverabbit.com/shapesv2

    Ingo

    stephaniewting
    Participant

    Hi,
    When I open the mobile menu, there is this extra blue line that I don’t want showing on the page. How to remove it? Thanks

    https://drive.google.com/file/d/1Tu46W-VpEXBAvC6spiTEgNqvdUf8U7Bs/view?usp=sharing

    Ludjon
    Keymaster

    Hi, I am trying to login with the latest credentials, but I can’t

    Can you check, please?

    Or try this edit:

    $( ‘.cl-mobile-menu-button’ ).on( ‘click’, function( ){
    var button = $(this);
    button.toggleClass( ‘open’ );
    setTimeout(function(){
    self.config.$responsiveMenu.slideToggle(‘200’);
    }, 200);
    } );
    stephaniewting
    Participant

    Hello there,

    I have addressed this problem in another topic called “mobile menu not working on first loading ”
    As of today the same issue seem to persist even after I edited the code in file wp-content/themes/folie/js/codeless-main.js to:

    $( ‘.cl-mobile-menu-button’ ).on( ‘click’, function( ){
    var button = $(this);
    button.toggleClass( ‘open’ );
    self.config.$responsiveMenu.slideToggle(‘200’);

    } );

    This is the latest of what I am seeing (about a week after I changed to the above code) on my Asus android phone..
    https://drive.google.com/file/d/1EIU3H9uATJOQAkyv2_JDOijb4e6VDeVA/view?usp=sharing

    Is there a possibility that there is another duplicate .js files that is served, and that needs to be changed too?

    Thanks for your help!

    Sincerely,
    -S

    vindesign_it
    Participant

    Hi,

    This is unique way to add the products in food menu ? https://ibb.co/LZ7StYw

    Is there a fast way ? For example to CSV or ACF ?

    The mobile versione is little intuitive, is there a way to set the category menu in top ? ( like in this web site ? https://shiros.com/menu/)

    Thanks a lot,

    Best Regards.

    • This topic was modified 5 years, 1 month ago by vindesign_it.
    Ludjon
    Keymaster

    Hi,

    I found out the issue. Sorry we will update on next update. Replace header.php on child theme with:

    <!DOCTYPE html>
    
    <html <?php language_attributes(); ?> class="css3transitions">
     
    <head>
    
        <meta charset="<?php esc_attr(bloginfo( 'charset' )); ?>" />
    
        <!-- Responsive Meta -->
        <?php if(codeless_get_mod('responsive_bool')): ?> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <?php endif; ?>
    
        <!-- Pingback URL -->
        <link rel="pingback" href="<?php esc_url(bloginfo( 'pingback_url' )); ?>" />
    
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    
    	<!--[if lt IE 9]>
    
    	<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    
    	<![endif]-->
    
        <?php
        
        //Generated css from options
        include( get_template_directory() . '/includes/register/register_styles.php'); 
        
        // Loaded all others styles and scripts.
        
        // If Codeless Framework plugin active, add tracking codes and analytics codes (plugin territory)
        if( function_exists( 'codeless_show_extra_coding_functions' ) )
            codeless_show_extra_coding_functions();
    
        // Loaded all others styles and scripts.
        wp_head(); 
    
        ?>
    
    </head>
    
    <!-- End of Header -->
    
    <body  <?php body_class(); ?>>
    
    <?php if(codeless_get_mod('show_search')): ?>
        <div class="search_bar"><div class="container"><?php get_search_form() ?></div></div>
    <?php endif; ?>
    
    <?php if(codeless_get_mod('extra_navigation')): ?>
        <div class="extra_navigation <?php echo esc_attr(codeless_get_mod('extra_navigation_position')) ?>">
            <a href="#" class="close"></a>
            <div class="content"><?php dynamic_sidebar( "Extra Side Navigation" ); ?></div>
        </div>
    <?php endif; ?>
    
    <div class="viewport">
    
    <!-- Used for boxed layout -->
    <?php if(codeless_get_mod('site_layout') == 'boxed'): ?>
    <!-- Boxed Layout Wrapper -->
    <div class="boxed_layout">
    <?php endif; ?>
        
    
        <!-- Start Top Navigation -->
        <?php if(codeless_get_mod('top_navigation')): ?>
        <div class="top_nav <?php echo esc_attr( (  codeless_get_mod('top_navigation_mobile') ) ? 'top_nav_mobile' : '' ); ?>">
            <?php 
            
            $topnav_left_colsize = '6';
            $topnav_right_colsize = '6';
    
            if( codeless_get_mod('topnav_layout') == '3-9' ){
                $topnav_left_colsize = '3';
                $topnav_right_colsize = '9';
            }
    
            if( codeless_get_mod('topnav_layout') == '9-3' ){
                $topnav_left_colsize = '9';
                $topnav_right_colsize = '3';
            }
            
            ?>
            <div class="container">
                <div class="row-fluid">
                    <div class="span<?php echo esc_attr( $topnav_left_colsize ) ?>">
                        <div class="pull-left">
                            <?php dynamic_sidebar( "Top Header Left" ); ?>
                        </div>
                    </div>
                    <div class="span<?php echo esc_attr( $topnav_right_colsize ) ?>">
                        <div class="pull-right">
                            <?php dynamic_sidebar( "Top Header Right" ); ?>
                        </div>
                    </div>
                   
                </div>
            </div>
    
        </div>
        <?php endif; ?>
    
        <!-- End of Top Navigation -->
    
            
        <?php $header_class = codeless_get_mod('header_style');?>
    
        <?php if(codeless_get_mod('header_style') == 'header_1' || codeless_get_mod('header_style') == 'header_4' || codeless_get_mod('header_style') == 'header_5' || codeless_get_mod('header_style') == 'header_9' || codeless_get_mod('header_style') == 'header_11'){
            
            if( is_archive() )
                $page_header_menu_color = codeless_get_mod( 'archives_header_color' );
    
            if((int) codeless_get_post_id() != 0){
                $page_header_menu_color = redux_post_meta('cl_redata',(int) codeless_get_post_id(), 'page_header_menu_color');
            }
    
            
        
            if(isset($page_header_menu_color) && !empty($page_header_menu_color))
                $bgCheck = ($page_header_menu_color =='auto') ? '' : 'background--'.$page_header_menu_color; 
            else
                $bgCheck = 'background--light';
        } 
        ?>
    
        <?php if(codeless_get_mod('header_6_transparent') && $header_class == 'header_6'): ?>    
        
        <!-- Header 6 Wrapper -->
        <div class="header_6_wrapper">
         
        <?php endif; ?> 
    <?php if(codeless_get_mod('header_transparency'))
        $transparent='transparent';
    else $transparent='';
    ?>
    
        <!-- Header BEGIN -->
        <div  class="header_wrapper <?php echo esc_attr($transparent);?> <?php echo esc_attr($header_class) ?> <?php echo esc_attr($bgCheck) ?> <?php if($header_class == 'header_7') echo 'pos--'.esc_attr(codeless_get_mod('header_7_position')) ?>">
            <header id="header" class=" <?php echo esc_attr($transparent);?>">
                <?php if(!codeless_get_mod('header_container_full')): ?>
                <div class="container">
                <?php endif; ?>
            	   <div class="row-fluid">
                        <div class="span12">
                            
    
                            <?php if($header_class == 'header_11'): ?>
                            <div class="centered_header">
                                <nav class="left">
                                    <?php 
                                        $args = array("theme_location" => "left", "container" => false, "fallback_cb" => 'codeless_default_menu');
                                        wp_nav_menu($args);  
                                    ?> 
                                </nav>
                            <?php endif; ?>
    
                            <!-- Logo -->
                            <?php if(!isset($css_class)) $css_class=''; ?>
                            <div id="logo" class="<?php echo esc_attr($css_class) ?>">
                                <?php echo codeless_logo() ?>  
                            </div>
                            <!-- #logo END -->
    
                            <?php if($header_class == 'header_11'): ?>
                                <nav class="right">
                                    <?php 
                                        $args = array("theme_location" => "right", "container" => false, "fallback_cb" => 'codeless_default_menu');
                                        wp_nav_menu($args);  
                                    ?> 
                                </nav>
                            </div>
                            <?php endif; ?>
    
                            <?php if($header_class == 'header_5' || codeless_get_mod('show_search') || class_exists('Woocommerce') || codeless_get_mod('extra_navigation')): ?>
                            <!-- Tools -->
                                <div class="header_tools">
                                    <div class="vert_mid">
                                        <?php if($header_class == 'header_5'): ?>
                                        <a class="open_full_menu" id="trigger-overlay" href="#">
                                            <i class="icon-bars"></i>
                                        </a>  
                                        <?php endif; ?>
    
                                        <?php if(codeless_get_mod('show_search')): ?>
                                        <a class="right_search open_search_button" href="#">
                                           <i class="icon-search"></i>
                                        </a>
                                        <?php endif; ?>
    
                                        <?php if(class_exists('Woocommerce')): ?>
                                        
                                            <?php get_template_part('includes/view/woocommerce', 'cart'); ?>
    
                                        <?php endif; ?>
    
                                        <?php if(codeless_get_mod('extra_navigation')): ?>
                                        <a class="extra_navigation_button" href="#">
                                            <i class="icon-bars"></i>
                                        </a>  
                                        <?php endif; ?>  
                                    </div>
                                </div>
                            <!-- End Tools-->
                            <?php endif; ?>
    
                            <?php if(codeless_get_mod('show_button')): ?>
                            <!-- Header Button -->
                            
                                <a href="<?php echo esc_attr(codeless_get_mod('header_button_link')) ?>" class="btn-bt <?php echo esc_attr(codeless_get_mod('overall_button_style', 0) ) ?> header_button header_button_<?php echo esc_attr(codeless_get_mod('header_button_color')) ?>"><?php echo esc_html(codeless_get_mod('header_button')) ?></a> 
    
                            <!-- End Header Button -->
                            <?php endif; ?>
    
                            <!-- Navigation -->
    
        			        <?php if($header_class == 'header_5'): ?>
                                <div class="header_5_fullwrapper overlay_menu overlay-hugeinc">
                                    <button type="button" class="overlay-close">Close</button>
                                    <nav>
                                            <?php 
                                                $args = array("theme_location" => "main", "container" => false, "fallback_cb" => 'codeless_default_menu');
    
                                                if( codeless_get_mod('custom_menu_for_page') )
                                                    $args = array('menu' => (int) codeless_get_mod('custom_menu_for_page'), "container" => false, "fallback_cb" => 'codeless_default_menu');
                                                    
                                                wp_nav_menu($args);  
                                            ?> 
                                    </nav>
                                </div>
                            <?php endif; ?> 
                            
                            <?php if($header_class == 'header_1' || $header_class == 'header_2' || $header_class == 'header_3' || $header_class == 'header_4' || $header_class == 'header_7' || $header_class == 'header_8' || $header_class == 'header_9'): ?>	
                            
                            <?php if($header_class == 'header_7') $css_class .= ' pos_'.esc_attr( codeless_get_mod('header_7_position') ).' ' ?>
                            <div id="navigation" class="nav_top pull-right  <?php echo esc_attr($css_class) ?>">
                                <nav>
                                <?php 
                                    $args = array("theme_location" => "main", "container" => false, "fallback_cb" => 'codeless_default_menu');
    
                                    if( codeless_get_mod('custom_menu_for_page') )
                                        $args = array('menu' => (int) codeless_get_mod('custom_menu_for_page'), "container" => false, "fallback_cb" => 'codeless_default_menu');
    
                                    wp_nav_menu($args);  
                                ?> 
                                </nav>
                            </div>
                            <?php endif; ?> 
    
                            <!-- #navigation -->
    
                             <!-- End custom menu here -->
                            <?php if(codeless_get_mod('responsive_menu_dropdown')): ?>
        		    	         <a href="#" class="mobile_small_menu open"></a>
                            <?php endif; ?>
                            
                            <?php if($header_class == 'header_6' || $header_class == 'header_7' || $header_class == 'header_12'): ?>
                                <div class="header_widgetized">
                                    <?php dynamic_sidebar('Header Widgetized Area'); ?>
                                </div>
                            <?php endif; ?>
                            
    
                        </div>
                    </div>
                    <?php if($header_class == 'header_3'): ?>
                        <?php if(codeless_get_mod('responsive_menu_dropdown')): ?>
                        <!-- Responsive Menu -->
                        <div class="row-fluid">
                            <?php get_template_part('includes/view/menu', 'small'); ?> 
                        </div>
                        <!-- End Responsive Menu -->
                        <?php endif; ?>
                    <?php endif; ?>
                    
                <?php if(!codeless_get_mod('header_container_full')): ?>
                </div>  
                <?php endif; ?>
                <?php if($header_class != 'header_3'): ?>
                
                <?php if(codeless_get_mod('responsive_menu_dropdown')): ?>
                <!-- Responsive Menu -->
                    <div class="row-fluid">
                        <?php get_template_part('includes/view/menu', 'small'); ?> 
                    </div>
                <!-- End Responsive Menu -->
                <?php endif; ?>
                <?php endif; ?>
            </header>
    
        </div>
        <?php if($header_class == 'header_6' || $header_class == 'header_10' || $header_class == 'header_12'): ?> 
        <div class="full_nav_menu">  
            <div class="container">
                <div id="navigation" class="nav_top pull-right  <?php echo esc_attr($css_class) ?>">
                    <nav>
                        <?php 
                            
                            $args = array("theme_location" => "main", "container" => false, "fallback_cb" => 'codeless_default_menu');
    
                            if( codeless_get_mod('custom_menu_for_page') )
                                $args = array('menu' => (int) codeless_get_mod('custom_menu_for_page'), "container" => false, "fallback_cb" => 'codeless_default_menu');
                            
                            wp_nav_menu($args);  
                        ?> 
                    </nav>
                </div>
                <?php if($header_class == 'header_12'): ?>
                    <div class="after_navigation_widgetized">
                        <?php dynamic_sidebar(__('After Navigation Area','specular')); ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <?php endif; ?>
    
        <?php if(codeless_get_mod('header_6_transparent') && $header_class == 'header_6'): ?>    
        </div>
        <!-- Close Header 6 Wrapper -->
        <?php endif; ?> 
    
        <?php if( (int) codeless_get_post_id() != 0 && redux_post_meta('cl_redata',(int) codeless_get_post_id(), 'post_style') != 'fullscreen' ): ?>
        
        <div class="top_wrapper">
        <?php endif; ?>
            <?php get_template_part('includes/view/sliders_output'); ?>
    
    <!-- .header -->

    Let me know if this works
    Thanks

    Eldo
    Keymaster

    Hello,

    5. Please try to add this code instead:

    @media (max-width: 979px){
    
    .mobile_small_menu {  color: #4F4F50  !important;}
    
    }

    6. You have to add this custom code:

    .menu-small ul li.current_page_item{
       color:#4F4F50 !important;
    }

    Regards!

Viewing 15 results - 391 through 405 (of 1,351 total)