Docs

[tparkmedia]

Hello again,

I thought this would be an easy fix but I can’t figure it out.

The top of my main page is getting cut off.

I don’t have any other pages set up except for the blog posts and those are fine.

I looked through the forum but can’t find anything applicable to my situation.

http://sonmat.kitchen

The screenshot link above is not very clear. But if you go to my site it will be very clear.

This is all the coding I have in CSS. Don’t know if something in there is causing this.

THANKS AS ALWAYS!

/* hide entry icon next to post title */
	.format-standard .entry-title::before{
    content: "";
}

/* fix top of home page getting cut off */

/* change post title style, alignment and make it responsive */
	.single .entry-title{
  	font-size: 24px;
  	font-weight: 500;
  	text-transform: capitalize;
  	text-align: left;
}

	.single-post .entry-header{
    padding-top: 2em;
    margin: 0 auto;
    padding-left: 10%;
    padding-right: 10%;
}

	.single-post .entry-header .entry-title{
    width: 88% !important;
    padding: 0;
    max-width: 1200px;
}

@media(max-width: 979px){
	.single-post .entry-header{
    padding-left: 0;
    padding-right: 0;
}

	.entry-title:before {
	display: none;
}

/*Since the header padding was remove let's also remove content padding*/
	.single-post .entry-content{ 
    padding: 0 !important;
	}
}

/* hide featured image in post page */
	.single .entry-featured{
    display:none;
}

/* change width of blog posts pages */

/* change color of sidebar links */
	.widget, .widget li, .widget p, .widget span{
  	color:blue!important;
}

	.widget a{
	color:#808080 !important;
}

	.widget a:hover{
	color:#b3b3b3 !important;
}

/* move nav-bar to right of logo and align to bottom */
@media (min-width: 980px){
    .x-nav-wrap.desktop{
    margin: 0;
    position: absolute;
    top: 75%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	}
}

/* stop navbar from stacking and move it straight to mobile menu */
@media (max-width: 1144px){
   .x-nav-wrap.desktop{
  	display:none
   }

   .x-nav-wrap.mobile{
  	display:block
   }

   .x-nav-wrap.mobile.collapse{
  	display:none
   }

   .x-nav-wrap.mobile.collapse.in{
  	display:block
   }
}

@media (max-width: 1144px){
	.masthead-inline .x-btn-navbar{
  	display:block;float:right
   }

	.masthead-stacked .x-btn-navbar{
  	display:inline-block
   }
}

/* add shadow to essential grid title and excerpt text */
	.eg-item-skin-2-element-0{
  	text-shadow: 2px 2px 5px #999999;
}

	.eg-item-skin-2-element-5{
  	text-shadow: 1px 1px 3px #999999;
}

[tparkmedia]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS also:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 150px;
}

Hope it helps 🙂

[tparkmedia]

Perfect 🙂

I just had to put the !important tag but it works GREAT!

Thanks mucho 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts