Nrthugu

Hey I building a react app and I have a navigation bar which looks like this

import React, { Component} from 'react';

import NavImage from "../images/kickstarter.png";

import './navbar.css';



class Navbar extends Component {



    render () {

        return (

            <nav className="navbar navbar-expand-lg navbar-light">

             <div className="container">

                <ul className="navbar-nav mr-auto">

                    <img src={NavImage} width="170" height="60" className="" alt="Kickstarter"/>

                </ul>



                <div className="collapse navbar-collapse" id="navbarSupportedContent">

                    <ul className="navbar-nav mr-auto">

                    </ul>

                    <form className="form-inline my-2 my-lg-0">

                        <input className="form-control mr-sm-2 cus-nav-input" type="search" placeholder="Search Project" aria-label="Search" /> 

                    </form>

                </div>

                </div>

          </nav>

        )

    }

}





export default Navbar;

This looks something like this

Now, when user clicks on a search bar, I want it to occupy complete navbar, something similar to what product hunt have done

Question: Any idea how can I achieve it?

You could use a onclick function that sets the z-level of the search bar to 1 and sets the width to be equal to or a little smaller than the main nav-bar.

It’d look something like this

In the navbar input add:

onclick=“expandSearchBar()”

Then somewhere add the function:

function expandSearchBar() {

    //get the id of the search bar and set css to what you need

}