Menu isnt responsive in all browser sizes

Hi, can anyone help me with some CSS

I’m trying to get my menu to be responsive and stay aligned with different screen sizes can anyone help?



The problems you have are due to the (over)use of floats, relative positioning and ‘magic numbers’ to force a layout, which makes it very fragile in a responsive page.
The key is to keep everything in the natural flow of the page, otherwise you will get these overlaps when the page is resized.
For some reason you have put the search boxes outside of the header element, then tried to force it back into the header via relative positioning, not a good idea. There they have no regard to flow whatsoever. If you want it in the header, put it in the header element.

1 Like

the theme doesn’t have a header widget.

The page does contain a header element…
…well sort of. The opening tag is broken:-

<header id="masthead" class="site-header" role="banner" style="background-image: none; 		<div class="col-full">

It does not have a > on the end.
May I introduce a very useful tool, the html validator:-

Thanks, how do i fix this?

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: 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?

 * 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(); ?>>
<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="">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>

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

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

             * 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' ); ?>

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

     * 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">

         * Functions hooked in to storefront_content_top
         * @hooked woocommerce_breadcrumb - 10
        do_action( 'storefront_content_top' );