How to hide the header and shorten the width of Mobile menu bar in WordPress

Suggesting a way to increase or decrease the height and width of any element in a website will be difficult without looking at it as the "class" or "id" and stylesheet definition being used in the website depends on what solution to offer. In CSS, we change the width and height of an element by changing its pixel value as shown below:-

.some_class {width: 100px;height:100px}

You just need to change the name of the class and the values i.e. 100px in the above example as per your own requirement. In case you are not aware of the class name and where to find it, you can right click on the page in your browser, preferably Google Chrome, and use Inspect element feature on the element for which you want to change its CSS dimension.

For the mobile menu, if your website is a responsive page then the CSS will be available under Media queries and needs to be changed therefrom.

If the problem persists or you are unable to follow the solution, please get back with additional details such as the URL of the page where the problem exists and point out the specific part of the page where modification is required to be made.