Content move

• 

  taewan26 · Member · Jan 8, 2015 at 6:01 pm

  • Copy link
  • Add topic to favorites

  I’d Like to move the Page content between the candle lights and the 3 feature images. is this possible with CSS?

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Jan 9, 2015 at 9:21 am

  • Copy link

  Please try this CSS and let me know how it goes :-)

  a.post-thumbnail {
      position:absolute;
      top: 500px;
  }
  
  .home div#tertiary {
  margin-top: 250px;
  }

• 

  taewan26 · Member · Jan 9, 2015 at 1:46 pm

  • Copy link

  hi chaitanyamsv,

  So everytime i put my content on this page… it goes over the candle light banner. What i wanted to do is to have a text area in the white spaces between the candle light and the 3 feature images. I would still like the brief of the feature images the same as before. Can you help?

• 

  thesacredpath · Member · Jan 9, 2015 at 7:15 pm

  • Copy link

  Are you talking about moving the menu (Why Attend, Agenda…) below the candlelight image?

  If so, on a responsive width theme such as Edin, that would be more than a little challenging. We have to use position: absolute; to move the menu, which means it loses its position relationship to all other page element and floats freely above everything. In addition, the featured image at the top of your home page does not stay a static height, so we can’t set the menu to stay in one place in relationship to the image and content.

  The following is about the best we can do without requiring a ton of CSS.

  .navigation-classic .primary-navigation {
      position: absolute;
      top: 66%;
      z-index: 10;
      width: 100%;
  }

  If you maximize your browser window, you will see that the menu is overlaying the image, but as you narrow your browser window, it moves down to below the image and above the featured images. I’ve used a CSS selector that only affects the menu while it is the full menu, and when the touch device menu activates, everything changes back to normal position.

• 

  taewan26 · Member · Jan 9, 2015 at 7:18 pm

  • Copy link

  hi,

  no i want to move this down

  Hello, this is the content example…… test1

  let me know if this is possible.

• 

  thesacredpath · Member · Jan 9, 2015 at 8:21 pm

  • Copy link

  Ah, ok, let’s try this then.

  .with-featured-image .entry-content {
      position: relative;
      top: 310px;
      color: #000;
      line-height: 1em;
      font-size: 50%;
  }
  .content-area, .featured-page-area, .footer-widget-area, .front-page-widget-area, .grid-area, .widget-area {
      padding-top: 90px;
  }

• 

  taewan26 · Member · Jan 9, 2015 at 8:22 pm

  • Copy link

  that works! thank you

• 

  thesacredpath · Member · Jan 9, 2015 at 8:33 pm

  • Copy link

  You are welcome.

• 

  taewan26 · Member · Jan 9, 2015 at 9:00 pm

  • Copy link

  one more question… can we have this affect only works for the homepage css ? maybe making it inline?

• 

  thesacredpath · Member · Jan 10, 2015 at 12:05 am

  • Copy link

  You can target the home page only by using the home page CSS body class. Change what we have above to this.

  .home .with-featured-image .entry-content {
      color: #000;
      font-size: 50%;
      line-height: 1em;
      position: relative;
      top: 370px;
  }
  .home .content-area, .home .featured-page-area, .home .footer-widget-area, .home .front-page-widget-area, .home .grid-area, .home .widget-area {
      padding-top: 120px;
  }