Jump to content

Archived

This topic is now archived and is closed to further replies.

jennajonesdesign

Z Index?

Recommended Posts

jennajonesdesign+    15
jennajonesdesign

Hi guys!

 

I am hoping to achieve a look similar to this website with the logo on top of the nav section content sections below. http://wildflowermontana.com/

 

Is there a good way to do this with DMS? I think this includes using a z-index with CSS. Would really appreciate any tips and if you can point me in the right direction.

 

Jenna

Share this post


Link to post
Share on other sites
James B    436
James B

Looking at that site it appears the logo is inserted inside it's own div. Doing it their way, the easiest way to do this would be to insert the logo using a hook inside the header, giving the area its own id so you can manipulate it with css. Then position it with css in the correct area in the header and use css to split the nav to leave the gap in the middle for the logo to show through.

 

However in DMS, as you can edit the width of various sections and place items into columns etc. You could set up three columns, one nav with a custom menu on the left, logo in a media box in the middle, then custom menu on the right. So it gives the effect it's all one navbar, but its actually three different sections.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

Hi guys!

 

Sorry for the confusion. I actually don't care about the cenetering. I will probably still keep the logo on the left. I just wanted to do a logo that is bigger than the rest of the nav section. In the site I linked to I like how the logo overlaps all of their header images. That is the part I was having a hard time wrapping my brain around!

 

Is that a possibility with DMS? I am thinking I would need to set up a logo that is ontop of the other sections so it would be partly cover the header and partly covering the content below. Make sense?

 

Jenna

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Bacically, all that site is doing is adding a logo above the Navbar, then using z-index and adding a negative margin-bottom to the logo image itself, which in turn will push the Navbar up. Then they give the NavBar a lower zindex value. Thats the gist of it anyway.

What I would recommend is for you to use Google Chrome and just view the code they have used and use it as a base for your own. I did the same thing and got the following result in a matter of minutes.

 

http://cl.ly/image/0b2Y3q3z0P1S

 

The image above doesn't show the border going behind the image, as the editor is active, you can see it here properly - http://cl.ly/image/0R3s0L420Q1v

 

Obviously, its going to take a some CSS to resolve all the issues, such as when the browser is viewed on a mobile device, etc... but you can use that sites code on your own with some minor tweaks. 

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jennajonesdesign+    15
jennajonesdesign

Danny! Awesome!!! Thanks so much.

 

One last question. In the example that you created, it looks like the content section is still below the logo instead of moving up under it. Is that the case? Is that resolved with a Z-index and a negative margin as well?

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, yes moving up the main page content using a negative margin and then adjusting the z-index for that section will allow the logo image to float on top of the content.

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • lionel1
      By lionel1
      Hi,
      i try to put some images (Logos) in the Agency module / clients module section
      But i only can put 6 logos though the module propose to add more item
      Thanks for ur help
      Lionel 
      Capture d’écran 2017-06-27 à 20.55.27.png 
    • flourishdesignstudio
      By flourishdesignstudio
      Hello,
      I have an older site that was built using PageLines several years ago (prior to the release of DMS). I wanted to leverage some of the power of your new PL5 plugin but the theme prevents be from adding any generated custom sidebars to the theme (through the drag and drop interface) and does not allow me to add any PL5 sections/containers/etc to the header or footer. Is there any way to easily override that or am I stuck only using PL5 in the content areas of the site?
      Thanks so much for the help!
    • JP
      By JP+
      Hello,
      How can you set the translations with platform5, the parts that are not in pages or posts? Texts and images…
    • romanondrasek
      By romanondrasek
      hi all, I have some trouble using PL5 on my site. 
      I used plugins for event calendar (event on) and plugin (timetable responsive scheduler for WP) for schedule (classes) in the gym.
      The problem is, that post from this 2 plugins are shown without menu in header and footer. (I setup header and footer) in the page editor for all type of page. 
      When I create a lesson, it creates posts with slug (I have a slug "lekce" & event for events).
      I try to edit the post with PL editor, but editor is not opening on the post.

      Do you have some idea where should be some problem? Thanx so much.
      here are links for the sites :
      site with schedule :
      http://www.myfit.cz/rozvrh/
      site of one of the class (pilates)
      http://www.myfit.cz/lekce/pilates/
      site with calendar :
      http://www.myfit.cz/kalendar/
      7 side with one event from the calendar :
      http://www.myfit.cz/event/pilates-instruktor-akreditovana-licence/?ri=1
      when I have my site on DMS2 it was working :-(
       
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I just migrated from DMS to PageLines Platform 5 and noticed that after uploading my fav icon to Site Images, the default PageLines icon is still showing in my browser as well as in the HTML source code.
      The page in question is www.michaelkummer.com - is there anything else I need to do in order to update the favicon?
      Thanks
      Michael


×