How to remove the header masthead (?)

Activello
1

Hello,

I want to remove the space between my nav menu and the slider. I’d like to remove that space (normally for logo or title or tagline) across the whole site. How do I go about doing that? I done some research on the support forum however none of the solution seems to work.

I have tired the below:

.bottom-header{
display: none;
}

.home .bottom-header{
display: block;
}

/Padding for the title/
header#masthead {
margin-bottom: 10px;
}

And the ones below erases everything on top of the photo slider including menu:

header#masthead {
display: none;
}

header#masthead, a.btn.back-to-top {
display: none;
}

I have attached a photo example of what I mean below. I’d like to either to preferably remove that whole portion and have a small space between the nav menu and slider or to leave it blank and smaller space.

Thank you in advance for the support!!

2

Also how can I make the nav menu smaller? The text etc. If I want to add another menu item it doesn’t fit the screen!

My webpage is www.thedailydoseofsun.com

3

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*reduce logo padding */
div#logo {
    padding-top: 10px;
    padding-bottom: 10px;
}

/*menu font size*/
.navbar-default .navbar-nav> li> a{
  font-size: 11px;
}

Best Regards,
Support

4

Thank you so much for your quick reply! I don’t know what I’d do without this support forum.

I’ve tried it out however it isn’t exactly what I wanted. I’d like to remove the logo padding/header masthead area completely. Is that possible? At the moment it’s much smaller (which is better for me) but I want it complete gone.

Thanks again!

5

Hey there,

Happy to help,

If you want it gone, simply change the padding values to 0px, in the previous code provided.
You can edit these values to your liking.

/*reduce logo padding */
div#logo {
    padding-top: 0px;
    padding-bottom: 0px;
}

Best Regards,
Support

6

Thank you for the CSS code however it still isn’t working. Can you check for me? My URL is www.thedailydoseofsun.com

The below is a list of codes I have on CSS:
.main-content-area .cat-title {
display: none;
}

.entry-meta .posted-on {
display: none;
}

article.post .post-categories a, .post-inner-content .cat-item a {
display: none;
}

.navbar-default .nav-search {
display: none;
}

@media (min-width: 767px){

.site-navigation-inner {
float: none;
margin: 0 auto;
display: table !important;
width: auto;
}
}

.flex-caption .post-categories {
display: none;
}

#page .flex-caption * {
font-family: Lora;
}

#page a:hover {
background-color: transparent !important;
}

/hover menu color/
.dropdown-menu> li> a:hover{
background-color:#d0b482 !important;
color:#F05214;
}
.cat-title,
body.page h1.entry-title {
display: none;
}

nav.navbar.navbar-default {
box-shadow: none;
}

.navbar-nav li a {
padding: 5px 0 10px 10px;
line-height: 10px;
}

#header .top-header {
padding-top: 10px;
padding-bottom: 10px;
}

.bottom-header{
display: none;
}

.home .bottom-header{
display: block;
}

#page .navbar-default .navbar-nav > li > a, #page .nav-search {
padding: 10px 0;
}
footer#colophon {
padding: 25px 0;
}

@media (min-width: 767px){
header#masthead {
margin-top: 50px;
}
}

nav.navbar.navbar-default {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999999;
}

/*reduce logo padding */ div#logo {

padding-top: 10px;
padding-bottom: 10px;
}

/menu font size/
.navbar-default .navbar-nav> li> a{
font-size: 11px;
}

/*reduce logo padding */
div#logo {
padding-top: 0px;
padding-bottom: 0px;
}

7
I’ve tried it out however it isn’t exactly what I wanted. I’d like to remove the logo padding/header masthead area completely. Is that possible? At the moment it’s much smaller (which is better for me) but I want it complete gone.

You can remove header masthead area completely by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

#masthead {
    display: none;
}
8

Hello Movin,

Thank you for the code however as I mention in my first post this code erases not just the display of the masthead but also my navi menu… Are there other ways to do this? Or what could be wrong with the CSS codes I have running (as I have posted in the one above).

Thanks again! I really hope someone can help me fix this problem.

9

If you want to just remove site title and not menu then just use the below custom CSS code.

#masthead > .container {
    display: none;
}
10

Thank you so much Movin! It works!! You guys really are the best support forum ever.

11

You are most welcome here :slight_smile: