Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • October 4, 2019 at 6:44 am #1144884
    Dzimnikov

    Hey guys.

    I recently convinced a client to go with Enfold for their site (cause yall the best obviously), but want to achieve a look that they wanted from another theme.

    Here is a demo to that theme: https://wp.nkdev.info/snow/demo-fullscreen/?fbclid=IwAR3SVfQtaS-bxOgSY3WU4yqrhogtWZ6x6AODjLd6K4S-C3-UOhfnBPBKHfU

    As you can see, only the front page has the full with picture and the logo at the top, with the mobile style menu at the top right. On other pages, you get the regular menu at the top: https://wp.nkdev.info/snow/about-me/

    Is there a way I can achieve this in Enfold … aka change the menu rules for just the homepage?

    Thank you as always for your help!

    All the best,
    -Daniel

    P.S. – figured out how to make the header for just that page transparent. Is there a way to change the menu to mobile style for just that one page?

    • This topic was modified 5 years ago by Dzimnikov.
    October 4, 2019 at 8:56 pm #1145098
    Victoria

    Hey Dzimnikov,

    Well, the layout can be built with the grid rows or color sections and 1/2 elements, but such a vertical slide function is not available in Enfold. Yes, you can show the burger menu on all screens. It is set in the Theme options > Main menu > Menu Items for Desktop
    Image 2019-10-04 at 21.55.39.png

    Best regards,
    Victoria

    October 4, 2019 at 10:47 pm #1145158
    Guenni007

    First of all – you have to choose on Main Menu – Burger/Mobile Menu – the “Fullpage Overlay” – to have the same style as that page.
    The Landing Page you had to choose the transparency option on that page editing ( right side) – maybe a fullscreen Slider would be nice.
    Let that Option Victoria shows in her image as Display as text / to have on all other pages the normal menu.
    To have the burger directly showing only on homepage – This to your quick css:

    .responsive #top.home .av-main-nav .menu-item {
    display: none;
}
.responsive #top.home .av-main-nav .menu-item-avia-special {
    display: block;
}

    that effect is nice – but not withour big changings to reach with Enfold

    October 4, 2019 at 11:12 pm #1145164
    Guenni007

    maybe for this page you take the fullscreen slider – have transparency header and show no footer nor socket.
    And then take the slideshow to have no autorotation. the dots you have to choose the slides you can force to be elsewhere on your page. Maybe to have them on the right side. Like in your example above.
    This here is only an experimental navigation for the slider but you see what i mean with your page.

    https://webers-testseite.de/guenni/slidepage/

    October 5, 2019 at 12:43 pm #1145249
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Let us know if you should need any further help on the topic @Dzimnikov.

    Best regards,
    Rikard

    October 6, 2019 at 5:49 am #1145423
    Dzimnikov

    Thanks so much. That CSS code was exactly what I was looking for. Worked perfectly. Yall are the best.

    Several questions. How do I make the logo drop lower and align with the burger menu? Also, is there a way to move the burger menu farther to the right of the screen. Maybe change it from 80% width to 90% or something like that.

    On a side note, does the newest version of Enfold not have the Advanced CSS editor? I hope not, it was suuuuper useful!!!

    Cheer everyone!
    -Daniel

    October 6, 2019 at 8:20 pm #1145494
    Guenni007

    What do you mean by advanced css editor?

    October 6, 2019 at 8:52 pm #1145515
    Dzimnikov

    View post on imgur.com

    See circled.

    Thank you so much for the CSS code above btw. Any chance you can help me out with some more? Here is the link to the site atm: http://flashdance.jointdiplomacy.com/

    Is there a way to drop the logo and make it more in line with the menu? Can we move the menu further to the right? Maybe make it white instead of grey?

    Thank you so much for the help, can’t express how grateful I am!!!

    P.S. The overlay effect on the home page only seems to work on desktop. On mobile, you still have the white menu bar running across the top. Is there a way to get the overlay effect to work on the home screen on mobile screens as well?

    • This reply was modified 5 years ago by Dzimnikov.
    October 7, 2019 at 6:46 am #1145640
    Ismael

    Hi,

    Thank you for the update.

    You can use this css code to push the logo downwards.

    .logo img {
	top: 20px;
}

    Add this one to adjust the menu position and change its color to white.

    .main_menu {
	right: -100px;
}

.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
	background-color: #ffffff;
}

    You may need to adjust the right property value on mobile view. And in case you want to change the search icon color, add this.

    #top #menu-item-search > a {
	color: #ffffff;
}

    Best regards,
    Ismael

    October 12, 2019 at 4:34 am #1147298
    Dzimnikov

    Hi, this is super useful. Thank you so much! I made these changes to desktop only, so it still looks right on mobile! Rock on!

    Is there any way I can remove the white background on mobile as well? Currently it looks like this: https://imgur.com/a/vAG9SK2

    Is it as simple as making the background color opacity 0 or something to that degree?

    Cheers,
    -Daniel

    October 13, 2019 at 10:30 am #1147541
    Victoria

    Hi Daniel,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width:767px){
     .caption_framed .slideshow_caption .avia-caption-title {
         background: transparent;
     }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 13, 2019 at 11:14 pm #1147639
    Dzimnikov

    Hey, I put the code into Appearance – Customize – Additional CSS (Thats where I normally put CSS code)

    Didn’t work for me. Not sure why

    October 15, 2019 at 9:33 am #1148007
    Ismael

    Hi,

    Thank you for the update.

    Do you want to remove the header background and make it transparent? If so, then you can use this css code.

    @media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
	background-color: transparent;
}

.responsive #top #wrap_all #header {
	position: fixed;
}
}

    Please don’t forget to toggle the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

    October 16, 2019 at 10:16 pm #1148696
    Dzimnikov

    Hi Ismael,

    Thank you so much! That worked perfectly!

    Random question. When I applied that last bit of code, I for some reason lost the menu on desktops. I then had to adjust the following code:

    .main_menu {
	right: -100px;
}

    and change it to -10px. Now its showing up and working fine. Would it make sense to change the value from pixels to %, so that it remains consistent across devices? From testing, it seems to be working fine, but I know percentages are often more reliable than pixels when it comes to screen sizes.

    You guys and gals are awesome!!!
    -Cheers

    October 16, 2019 at 11:04 pm #1148707
    Jordan Shannon

    Hi,

    For something like the menu, then px is fine. % would be a better fit for things such as images that need a little more responsiveness.

    Best regards,
    Jordan Shannon

    October 17, 2019 at 1:23 am #1148734
    Dzimnikov

    Gotcha, makes sense.

    Quick question, the menu was editted to be white for the homepage (since its transparent), but since the background for the menu is white on all the other pages, you can’t see the menu on those pages.

    Is there a way to edit CSS code for individual pages that won’t affect the entire site?

    Sorry for all the questions. Once I get this down, I’ll be using this info for future sites as well :)

    ———

    Also have another issue on this page on mobile: https://flashdance.jointdiplomacy.com/?page_id=21

    I have a colored section at the top of the page that has a background image of two dancers. I positioned it to be top center which works on desktop. On mobile, the top of the image is cut off. Seems like “top center” starts at the very top of the page and the menu itself is covering it – as if the menu is overlayed on top of the image, rather than being above it.

    Now that I think about it, the above will also resolve itself if I can just use the CSS from this thread on just the homepage only.

    Thanks,
    -Daniel

    • This reply was modified 5 years ago by Dzimnikov.
    October 17, 2019 at 4:22 am #1148763
    Dzimnikov

    Hey, sorry for the double post. Was able to fix most of the issues above by isolating just the the homepage in the code. Is there a way to just identify the home page from the very beginning, and then just add all this code below it and then close the bracket? Would make life sooo much easier!

    Still have one weird issues to fix, stemming from this page: https://flashdance.jointdiplomacy.com/?page_id=21

    1) So, for some reason, the logo on all the other pages sticks to the very top of the page. If I apply the CSS code to it that drops it down, the logo stops being responsive when you scroll down the page. This is weird, since on mobile, the logo is aligned and centered to match the burger menu. Very weird.

    2) Going back to the color of the burger menu on all the pages except for the home page. I added .page-id-17 in front of the following code you sent me: 

    .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
	background-color: #ffffff;
}

    but all it did was remove the white overlay from the middle bar, not the top nor bottom bar. of the burger menu. Once again, reeaaally weird, I’m not sure why lol. I messed around with moving the page identifier code, but it would just change the color on one of the three burger bars, not all of them.

    On a side note, whats would happen if I added the extra menu bar on top of the regular menu? I would also want it to disappear on the homepage only.

    Once again, thank you for all your help!

    Cheers,
    -Daniel

    October 21, 2019 at 6:57 am #1149722
    Ismael

    Hi,

    Now that I think about it, the above will also resolve itself if I can just use the CSS from this thread on just the homepage only.

    You can prepend “.home” to the css selectors to limit the style to the home page. Example:

    .home #selector .another-selector { 
   // style here
}

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.