Make any section/row on a page static

Tagged: , , ,

Author Posts

oarsFL August 17, 2015 at 8:46 pm

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

Q 1. I have set 3 call to action boxes just below the menu bar on this page: http://test.oceanaddictionrecovery.com/about-us/our-mission/. When you scroll down, this row of call to action disappears. Will I be able to make this static with Microthemer so it stays anchored on the top when you scroll down like the menu bar which is static.

Q 2. The topmost static bar which has the phone number and social icons http://test.oceanaddictionrecovery.com/about-us/our-mission/
Will I be able to add an image and make it look like the top bar as you can see on this site http://www.detoxboca.com/

Sebastian August 18, 2015 at 8:20 pm

Hi there,

Yes to both. This is possible to do with CSS and therefore it is possible with Microthemer.

(I did actually respond to your email with this but perhaps it ended up in your spam folder?)

Answer 1

  1. Install Microthemer (free trial will suffice) and go to the main UI editing page
  2. Double-click on the grey area to the left of the 3 colored boxes.
  3. Choose the following selector that Microthemer suggests (in the list on the right): div#post-177 div.et_pb_section_0
  4. Name your selector Mission boxes Wrapper.
  5. Click the CREATE SELECTOR button.
  6. Go to the Position tab.
  7. Set the position property to fixed.
  8. Set z-index to 999.
  9. Go to the Dimensions tab.
  10. Set width to 100%.
  11. You will then need to create another selector for the main content that does scroll (to overcome the overlapping issue that will present itself).
  12. Double-click on the grey area to the left of the 3 colored boxes again.
  13. This time click the Inspector tab of the selector wizard and click on the right arrow of the directional controls once.
  14. Go back to the Targeting tab and choose the following selector that Microthemer suggests: div#post-177 div.et_pb_section_1
  15. Name your selector Main Content
  16. Click the CREATE SELECTOR button.
  17. Go to the Padding & Margin tab.
  18. Set the top padding to 200px.
  19. That should be it!

Answer 2

  1. Double-click the green area in the top bar (to the right of the text)
  2. Choose the following selector that Microthemer suggests (in the list on the right):
  3. div#top-header div.container
  4. Name your selector Top bar.
  5. Click the CREATE SELECTOR button.
  6. Go to the Background tab.
  7. Select an image to insert from your media library
  8. Set some of the other background properties on this tab to suit you needs (e.g. no-repeat, position etc).

I hope that helps, please let me know if you have any further questions.

Cheers!
Sebastian

You must login or register to reply to this topic.