• Hi there

    I’m a relative newbie so please bear with me…

    My dropdown menu has stopped working when I use Chrome to view my website on my smartphone. My website:

    https://www.learnandspeakenglish.co.uk

    The culprit is some CSS that I added to make my logo bigger:

    #main-nav {height: 75px;}

    .navbar-brand img {
    min-height: 45px;
    }

    Does anyone know how to have use this CSS (or a variation that does a similar thing) which allows the menu to start working again?

    Thanks for reading!

Viewing 15 replies - 1 through 15 (of 24 total)
  • liquid-web-design-london

    (@liquid-web-design-london)

    Hi – addd this media query to change the css for smaller devices:

    @media (max-width:769px) {
    #main-nav {height: auto;}
    }

    Hi there,

    Thanks so much your suggestion – but nothing has changed… ??

    I copy and pasted the text into CSS (below the text i’d added to change the logo size) – but I should’ve done something else maybe..?

    HOWEVER…!

    I tried deleting the text that caused the problem in the first place (in case it shouldn’t have been there), but as that didn’t work, I reinstated it – and now it all works on all my devices / browsers!

    Thanks you so much Liquid Web Design London ??

    Now resolved ??

    Hi Cheslp01,

    Which theme are you using? Eg Twenty Thirteen, or maybe a custom theme?

    Hi alsterb

    I’m using Zerif-Lite…

    …and currently trying to work out how to change the menu button image that shows up on the page on my mobile to say Menu instead (as that would seem a bit more obvious).

    You need to delete these lines, probably in your header.php template:

    <span class=”icon-bar”></span>
    <span class=”icon-bar”></span>
    <span class=”icon-bar”></span>

    And replace with something like:

    <h4>MENU</h4>
    <i class=”icon-arrow-down”></i>

    You’ll need to add some CSS to get the arrow in place, such as:

    .icon-arrow-down:before {
    content:”\f063″;
    }

    Hope this makes sense!

    Wow… Thanks!

    However, before I attempt this, I need to work out how to change this in my Child Theme (which I’ve been doing on and off unsuccessfully for days). I found half the solution on line – but can not find “the appropriate CSS” ??

    Simple steps:
    1.Copy header.php from the Filtered theme to your child theme folder.
    2.Edit the header.php file that you copied. Changes that you make here overwrite the original header.php.
    3.Add the appropriate css to your custom css in the theme admin panel.
    4.Upload the new files to your site.

    Any suggestions?

    Have you set your child theme up already? If so, it should include a styles.css file or something similar, that you can then add css changes too. ‘Appropriate CSS’ is any css you require to make custom changes like that I put in the last post.

    If you don’t set up your child theme correctly or activate it in the admin area, you will not see any changes!

    Thanks. Yep, I have a child theme and it includes a style.css file.

    I tried to copy everything in the header file and paste it into the Child them stylesheet, but received this message when I pressed ‘Update File’:

    Warning: session_start(): Cannot send session cache limiter – headers already sent (output started at /home/learnan1/public_html/wp-content/themes/zerif-lite-child/functions.php:16) in /home/learnan1/public_html/wp-content/plugins/shortpixel-image-optimiser/wp-shortpixel.php on line 69

    Any ideas…?

    Exactly what did you copy into the header.php file? Can you copy the section of code, including the parts before and after that you altered?

    Good morning alsterb

    FYI. I pasted it after the text that already existed (which is basically a description of the child theme – that was automatically there when I created the child theme – and ends with a little bit of ‘code’: @charset “UTF-8”;.

    Below is what I pasted into my “Zerif Lite Child: Stylesheet (style.css)” (MINUS the code you suggested I erase, and INCLUDES the code you suggested I use in it’s place)

    <?php
    /**
     * The Header for our theme.
     * Displays all of the <head> section and everything up till <div id="content">
     */
    ?><!DOCTYPE html>
    
    <html <?php language_attributes(); ?>>
    
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    
    <!--[if lt IE 9]>
    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
    <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/ie.css" type="text/css">
    <![endif]-->
    
    <?php
    
    if ( ! function_exists( '_wp_render_title_tag' ) ) :
        function zerif_old_render_title() {
    ?>
    <title><?php wp_title( '-', true, 'right' ); ?></title>
    <?php
        }
        add_action( 'wp_head', 'zerif_old_render_title' );
    endif;
    
    wp_head(); ?>
    
    </head>
    
    <?php if(isset($_POST['scrollPosition'])): ?>
    
    	<body <?php body_class(); ?> onLoad="window.scrollTo(0,<?php echo intval($_POST['scrollPosition']); ?>)">
    
    <?php else: ?>
    
    	<body <?php body_class(); ?> >
    
    <?php endif; 
    
    	global $wp_customize;
    
    	/* Preloader */
    
    	if(is_front_page() && !isset( $wp_customize ) && get_option( 'show_on_front' ) != 'page' ): 
    
    		$zerif_disable_preloader = get_theme_mod('zerif_disable_preloader');
    
    		if( isset($zerif_disable_preloader) && ($zerif_disable_preloader != 1)):
    			echo '<div class="preloader">';
    				echo '<div class="status">?</div>';
    			echo '</div>';
    		endif;	
    
    	endif; ?>
    
    <div id="mobilebgfix">
    	<div class="mobile-bg-fix-img-wrap">
    		<div class="mobile-bg-fix-img"></div>
    	</div>
    	<div class="mobile-bg-fix-whole-site">
    
    <header id="home" class="header">
    
    	<div id="main-nav" class="navbar navbar-inverse bs-docs-nav" role="banner">
    
    		<div class="container">
    
    			<div class="navbar-header responsive-logo">
    
    				<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
    
    				<span class="sr-only"><?php _e('Toggle navigation','zerif-lite'); ?></span>
    
    				<h4>MENU</h4>
     <i class="icon-arrow-down"></i>
    
    				</button>
    
    				<?php
    
    					$zerif_logo = get_theme_mod('zerif_logo');
    
    					if(isset($zerif_logo) && $zerif_logo != ""):
    
    						echo '<a href="'.esc_url( home_url( '/' ) ).'">';
    
    							echo '<img src="'.$zerif_logo.'" alt="'.get_bloginfo('title').'">';
    
    						echo '</a>';
    
    					else:
    
    						echo '<a href="'.esc_url( home_url( '/' ) ).'">';
    
    							if( file_exists(get_stylesheet_directory()."/images/logo.png")):
    
    								echo '<img src="'.get_stylesheet_directory_uri().'/images/logo.png" alt="'.get_bloginfo('title').'">';
    
    							else:
    
    								echo '<img src="'.get_template_directory_uri().'/images/logo.png" alt="'.get_bloginfo('title').'">';
    
    							endif;
    
    						echo '</a>';
    
    					endif;
    
    				?>
    
    			</div>
    
    			<nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation"   id="site-navigation">
    				<a href="#content"><?php _e( 'Skip to content', 'zerif-lite' ); ?></a>
    				<?php wp_nav_menu( array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'nav navbar-nav navbar-right responsive-nav main-nav-list', 'fallback_cb'     => 'zerif_wp_page_menu')); ?>
    			</nav>
    
    		</div>
    
    	</div>
    	<!-- / END TOP BAR -->

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been damaged by the forum’s parser.]

    I really hope you can make sense of it, i’m now getting the same error message when i try to other things…

    Somehow my tinkering with all the above REALLY messed my website up… I’m now able to get back in and modify it, but have had to take out the above changes and i’m back to square one…

    If anyone has any idea how I can make modifications to the menu button, by using my child theme (and probably CSS), I am all ears! ??

    If I can do it with this, I should then be able to work out how it all works and i’ll be able to make other modifications.

    Thread Starter www.easytospeakenglish.com

    (@cheslp01)

    Hi Alsterb

    I’m finally in a position to make the changes to my menu button that you so kindly gave me the code for ??

    I have replaced the 3 lines with the word “Menu” – but I can’t get the arrow to appear and and I’m having trouble changing things like the colour and size of the button.

    Would you be able to give me the correct code for these things?

    alsterb

    (@alsterb)

    I’m not sure where the original arrow went – it seems to have had something to do with the <i><class=”icon-arrow-down”></class=”icon-arrow-down”></i> which has lost the arrow css?

    Try changing this on styles.css line 1572 from this:

    .navbar-toggle.active {
    background-color: #e96656 !important;
    }

    To this:

    .navbar-toggle.active {
    background-color: #e96656 !important;
    background-image: url(https://www.learnandspeakenglish.co.uk/wp-content/themes/zerif-lite/images/menu-icon.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    }

    Not perfect but should add an arrow! The colour is the background colour here if you need to change it. If you add a padding line here to you should be able to control the size.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Drop down menu stopped working’ is closed to new replies.