Search icon and fixed position at the top

HTML & CSS
1

I have tried to move search input at the top. Please find nice example: https://codepen.io/choogoor: Header Search

It is header search but try to test inside navigation menu and the second search.header as above link.
If I experiment with the navigation menu, it should be seen my example:

.search-menu-overlay1 {
    display: none;
    position: fixed;
    top: 0;
    height: 40%;
    width: 100%;
    background: #CCC;
    z-index: 99;
}

How to invoke .show class and act search area like overlay? Need help.

2

I don’t quite follow but of you want to turn the search into a fixed positioned overlay then you’d need to address the form in question like this.

#header-2.show .search-box{
    position: fixed;
    top: 0;
    height: 40vh;
    width: 100%;
    background: #CCC;
    z-index: 99;
}

Not sure if that was what you were asking though :slight_smile:

3

Thank you for the hint. I try to do as your example. But the cross is not in the same position as search icon.
There is a CSS which is should be modified to do this:

.search-button {
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

Is it possible to separate search icon position and the cross position as it is moved too much left? In your example it will be the same position but it should be more right inside mobile resolution.

4

I think you will have to draw me a picture as I’m not getting what yu mean at the moment.

I think you want a modal to open up for the search box and that you want to move the close (x) icon onto the modal so you can close it. If so then you will need t fix position the icon when the menu is open.

Something like this:

#header-2.show .search-box{
    position: fixed;
    top: 0;
    height: 40vh;
    width: 100%;
    background: #CCC;
    z-index: 99;
}
.show .search-button {
    position: fixed;
    right: 20px;
    top: 20px;
  z-index:100;
  transform: translate(0, -50%);
}

However I think we are talking about cross purposes :slight_smile:

5

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