Modifying header height

Question

Want to reduce the height of header, when scrolling down page, it cover more space. 



Can you please resolve this issue?

Thanks in advance. 

Answer 1

Well, the length of the menu is quite long. You could try to decrease font sizes or remove unneeded menu items. You can also remove any extra space added by the Donut theme by following these steps:

1. Edit file Donut-theme/css/donut.min.css

2. Add these lines at the end of the file:

@media (min-width:768px){
    .navbar-nav>li{margin-left:8px}
    .navbar-nav>li>a{padding: 10px 0;line-height:30px}
}

.navbar .logo-wrapper {height: 35px}

.nav.navbar-nav.navbar-right.login-nav, .nav.navbar-nav.navbar-right.notf-bubble, .nav.navbar-nav.navbar-right.user-nav {padding: 4px 0}

header#nav-header {min-height: 55px}

3. Clear your browser's cache (In Chrome, press F12 and then CTRL+SHIFT+R)

Comments

Thanks for nice explanation. Can you please explain how to change default font style?
Thanks in advance.

---

I've noticed that code is not reflecting for logged in users? Could you pleas explain if possible?

---

It does reflect. The problem is that you must have added more items for logged in users so they take much more space. Keep the menu as short as possible by removing items that don't really add too much value

---

Can I reduce size of font and style of font? Since size of font is also looks bigger, so I want to do these changes, but don't know how. Can you please give a hint?

---

I want to change font "Roboto" or "Arial".

---

Just add at the end of the file the appropriate CSS style:

body {
    font-family: "Arial";
    font-size: 80%;
}