Dako Dako - 1 month ago 10
CSS Question

Advices on full overlay search menu

I started a blog. I'm new to coding and I want to transform my Search menu into a full overlay search menu. But for mobile devices, I only want something like this:

menu

And I don't really know, should I make a brand new search menu only for mobiles, or edit that one with resizing and other stuff?

I'm working on WordPress, and I know that there are plugins for this work, but I want to learn how to do it by myself. Not only that, but coding as all. And yea, I know it's bad, but it's my first one! :) So any suggestions would be really appreciated.

My blog link:www.shreddingnation.com

I really don't know which code to paste, and if there is even any need to paste code, so if you want me to paste anything, just say what. THANKS!

Answer

One way to do that is to use Css Media Queries. So in this case at a width <= 600px there will be a full search overlay.

1) Add the following css to wp-content/themes/yuuta/style.css

@media all and (max-width: 600px) {
    .site-header .search-form.search-form--active {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #fff;
        height: calc(100vh - 80px);
    }
    .site-header .search-form input.search-field {
        border: 1px solid #000;
        color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

2) Add the following js to /wp-content/themes/yuuta/assets/js/theme.js

after /* hide search field */ add

$('body').css('overflow','auto');

and after /* show search field */ add

$('body').css('overflow','hidden');

Hope this helps...