Menu isnt responsive in all browser sizes

You just need to spend some time going through the errors one by one. Prioritise the errors over warnings.
It should point you to what line to find each one and describe what the problem is.
For example the one about the header, it’s just a case of adding the missing > character on the end of the tag.
A lot of it is <style> tags in the body, they should all be in the head.

You may not have a header widget but presumably there is a header section (header.php perhaps) in your wordpress theme? You need to add a closing double quote and the > for that header tag.

As this is a wordpress issue I have moved this to the wordpress forum.

Where and what do I add this sorry?

As I say, start by looking for header.php in your theme’s folder and look at the code there. There should be your <header …

I have just downloaded the storefront theme from Woocommerce and the <header> tag is complete there, so rather disturbingly someone has edited the header.php code with no knowledge of what they are doing.

Aside from the validation errors, the good news is, the menu does seem to work fine.
The problem is all due to the Search thing. If I hide that, the menu behaves. (Edit: at least until it become the hamburger)
I think the answer is to re-position that element somewhere it won’t cause trouble:-

<div class="header-widget-region" role="complementary">

ok fixed the header.php now what :)?

just need to add the search bar into the header and also the products categories and realign the menu…

Still cant work out how to get the search bar in the header and lined up, can anyone help please?

Trying to add the predictive search widget into the header , using storefront theme… can someone please help, thanks :slight_smile:

I’m glad you sorted out the header problem. You shouldn’t be changing the original theme files in any case. You should be leaving these untouched and creating a child theme. See here: https://codex.wordpress.org/Child_Themes This way when a new version of the theme comes out you should be able to install it and take advantages of any new features the theme offers.

Thanks. I still can’t get the search bar into the header and lined up though, any ideas? Also want to line up the menu and footer better

I’m not sure TBH. I have some, but not a lot of experience with WordPress. However, after the closing </header> tag there is

<div class="header-widget-region"

which suggests this is the place to put your search widget (assuming it is a widget). How you get it there, I’m not sure, although in my experience these things are usually drag and drop.

Hmm would it help if I post the header. Php?

<?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package storefront
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <?php
    do_action( 'storefront_before_header' ); ?>

    <header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
        <div class="col-full">

            <?php
            /**
             * Functions hooked into storefront_header action
             *
             * @hooked storefront_skip_links                       - 0
             * @hooked storefront_social_icons                     - 10
             * @hooked storefront_site_branding                    - 20
             * @hooked storefront_secondary_navigation             - 30
             * @hooked storefront_product_search                   - 40
             * @hooked storefront_primary_navigation_wrapper       - 42
             * @hooked storefront_primary_navigation               - 50
             * @hooked storefront_header_cart                      - 60
             * @hooked storefront_primary_navigation_wrapper_close - 68
             */
            do_action( 'storefront_header' ); ?>

        </div>
    </header><!-- #masthead -->

    <?php
    /**
     * Functions hooked in to storefront_before_content
     *
     * @hooked storefront_header_widget_region - 10
     */
    do_action( 'storefront_before_content' ); ?>

    <div id="content" class="site-content" tabindex="-1">
        <div class="col-full">

        <?php
        /**
         * Functions hooked in to storefront_content_top
         *
         * @hooked woocommerce_breadcrumb - 10
         */
        do_action( 'storefront_content_top' );

Anyone got any ideas :(? shouldnt be that hard surely?

I can get the search bar into the header but still cant position it correctly.

Where should i place the code for my predictive search widget?

Someone more experienced with WordPress might be able to correct me, but I understood widgets only went in widget areas.

There is a way to make a custom widget area in the header php and then place the search widget into it but I can’t seem to get it right…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.