Inspiration needed: Frontpage with fullscreen pic and alternative menu - Support

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
January 13, 2014 at 5:11 pm #209047

mirzepapa
Participant

Hey Enfold community,
thanks to the Enfold, the outstanding Kriesi support Team my music school finally got a website that is attractive, great to handle and successful. Since April 2013 our WordPress enfold based website is online – and i still love the look and feel of enfold, especially when it comes to its flexiblity providing content in so many different ways. And we have doubled our visitors since then. So here is the status quo: http://www.musikzentrale.net, but i am still doing improvements every day.

By the time i got a little bored by the frontpage, some parents also said, the pictures are “too agressive” or “too cold”. Anyway, so i was looking for some ideas to provide stronger pictures. Since we have some pretty cool pics of our students on stage, i was looking around and found something cute: inspired by the Elision Theme i am currently using for a friend`s Website, i played arount with the Musikzentrale frontpage and came up with http://eli.nummer5.de/ – which i really love, <strong>but i do not want to switche themes.</strong>

Some decent attempts later, trying to adopt the full screen idea with navigation, i used enfold`s blank template, that leads to: http://www.musikzentrale.net/test-home2/. I love the power of the full screen pics, but i am afraid, we loose visitors without the main menu right on the frontpage.

So i set up version with the full screen slider AND main menu, which is http://www.musikzentrale.net/test-home/ – the pics loose so much of their power, no idea to follow.

Here is my question: Does anybody has an idea how to set up a full screen slider AND keeping the main menu AND the logo on the frontpage, but the menu transparent? Or maybe you have another cool idea that did not came acrosse me by now? You are welcome!

Cheers,
Sebastian.

January 14, 2014 at 7:46 am #209339
Devin
Inactive Moderator
Hi Sebastian!

I actually just did something like that for a client the other day and am planning to do a more full write up for the online docs since its such a popular home page style.

The basics of what you need to do are simple: remove the header background, position it floating on top of the content and then give that first block of content extra padding to push it down below the menu.
```
/*Removes
================================================== */

#header_main {
  border: 0;
}
.header_color .header_bg {
  background: transparent;
  border: 0;
}

/* # Header
================================================== */

#top .logo {
  left: -4px;
}

/*Navigation*/
.header_color .main_menu ul:first-child > li > a {
  color: #fff; 
  font-size: 15px;
}
.header_color .avia-menu-fx {
    background: #aabdd3;
    border-color: #aabdd3;
    display: none;
}
/* # Home Page Specifics
================================================== */

/*Header*/
#top.home #header {
  position: absolute;
  padding-top: 40px;
}

/* #intro */
#top.home #intro {
  padding-top: 128px;
  height: 710px;
  background: #e6e6e6;
  border: 0;
}
```
This assumes that on your home page you have that first item set inside of a color section with the developers field filled in with “intro” so that its wrapped in the #intro ID. On your demo page the first div is #fullscreen_slider_0 . So you would replace intro with that:
```
#top.home #fullscreen_slider_0 {
  padding-top: 128px;
  height: 710px;
  background: #e6e6e6;
  border: 0;
}
```
If you don’t want the transparent background to be on the sub pages then you would prefix the selectors with #top.home just like I’ve done for the #intro section and the modified version for your site specifically.

Best regards,
Devin
January 14, 2014 at 6:53 pm #209607
Michael Oeser
Participant
At least on my page that gives a very strange look. I don´t get the header to be transparent AND the slider to be full page. Would be great if you could write a small manual about this.
- This reply was modified 10 years, 11 months ago by Michael Oeser.
January 14, 2014 at 7:15 pm #209625

Michael Oeser
Participant

In addition: The way the menu and slider at http://demo.qodeinteractive.com/elision/ is exactly what I want to achieve. But of course I don´t want to go away from Enfold just because I love it ;-)

Cheers
Michael

January 15, 2014 at 10:27 am #209957
mirzepapa
Participant
Hi Devon,
thank you so much for sharing your work. Unfortunatley it does not work for the musikzentrale website so far. Here is what i have done:

– disabled custom.css so it does not interfere with the modifications
– entered this to the Quick CSS field in Enfold -> Styling
```
/*Removes
================================================== */

#top.home #header_main {
  border: 0;
}
.header_color .header_bg {
  background: transparent;
  border: 0;
}

/* # Header
================================================== */

#top.home #top .logo {
  left: -4px;
}

/*Navigation*/
.header_color .main_menu ul:first-child > li > a {
  color: #fff; 
  font-size: 15px;
}
.header_color .avia-menu-fx {
    background: #aabdd3;
    border-color: #aabdd3;
    display: none;
}
/* # Home Page Specifics
================================================== */

/*Header*/
#top.home #header {
  position: absolute;
  padding-top: 40px;
}

/* #slider */
#top.home #fullscreen_slider_0 {
  padding-top: 128px;
  height: 710px;
  background: #e6e6e6;
  border: 0;
}
```
It moves the header and the intro section down as supposed to and removes the borders, but header is still white and the full screen slider is to far underneath the header. I assume, i missed something in the styling, so any idea is welcome. Otherwise i am excited to read your tutorial on the Full Screen Homepage soon.

Thanks again,
Sebastian.
January 15, 2014 at 10:32 am #209960
Ismael
Moderator
Hi!

If you want something like the Elision header. You can use the Small Fixed Header then add this on Quick CSS:
```
.header_color .header_bg {
background-color: transparent;
}

.header_color div {
border-color: transparent;
}

.fixed_header #main {
padding-top: 0;
margin-top: -1px;
}
```
Regards,
Ismael
January 15, 2014 at 10:42 am #209967

Michael Oeser
Participant

Basically that works but the slider isn´t full page then and the menu remains complete transparent even when the page is scrolled. That makes it almost invisible in fact.

So this might be a good starting point but not a real solution. Thanks anyway.

January 15, 2014 at 11:05 am #209987

Ismael
Moderator

Hi!

Do you have the Fullscreen Slider? Edit js > shortcodes.js, find this code on line 687:

slide_height = Math.ceil( (viewport / 100) * this.options.height );

Replace it with:

slide_height = Math.ceil( (viewport / 100) * this.options.height + 88 );

Remove browser cache then reload the page.

Regards,
Ismael

January 18, 2014 at 6:50 pm #211628

Alex
Participant

Not to hijack this thread, but I am doing almost the same exact thing.

I was wondering, what code can you add to make it so that when you move your mouse over a menu item, it highlights the entire section in that color – in elisions example site, moving your mouse over a menu item highlights the whole block in black. How do I do that instead of the default colored line under the menu item?

January 18, 2014 at 8:59 pm #211669

Alex
Participant

Ismael, I have been trying to do the same thing, thanks! You are my hero. The adjustments you made worked perfectly.

January 19, 2014 at 12:29 am #211808

Ismael
Moderator

Hey!

Glad it worked. :)

Regards,
Ismael
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Inspiration needed: Frontpage with fullscreen pic and alternative menu’ is closed to new replies.