Prezi.com like start page

Support
#5

One more question, could I also set the menu colors to dark on the home page? as opposed to regular white on all the other pages? Or maybe make the nav bar see through?

#6

Hello @mikireimann,

Thanks for asking. :slight_smile:

Please add following CSS under X > Launch > Options > CSS to change navigation color only on home page:

.home .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    color: #000;
}

.home .masthead-inline .x-navbar .desktop .sub-menu a {
    color: #000;
}

Thanks.

#7

I added the text, but nothing changed, I would like the background be black and text white and orange or even grey and orange like now. but black would be ffffff, so what else do I need to add?

#8

Hello @mikireimann,

Thanks for clarification. Please replace the code I gave you with following:

.home .x-navbar {background-color: #000;}
.home .x-navbar .x-nav-wrap .x-nav > li > a {color: #fff;}
.home .x-navbar .desktop .x-nav > .current-menu-item > a {color: #fff;}

I am sharing the screenshot of the output that you should see upon adding above code. https://cloudup.com/chzpJnXhBhF

Thanks

#9

Beautiful. Thank you!

#11

I am still trying to recreate the page style of www.prezi.com, but I am failing to make my sections properly mobile adapted.
The part from the Demo with 1 row with 3 parts (3/3) is very nice and mobile, you have nice gaps on all sizes and text and picture is alternated on mobile.
But when I make multiple rows with 2 parts each (where the right and left part are different sized), it looks ok on Desktop, but on mobile, the gaps are way too big (after the classic slider especially) and you have text, picture, picture, text, text picture - not perfect.

Any way to fix this, like they did on www.prezi.com? (which is prob not wp:)

thank you for your thoughts.
Not sure if I explained it right, you can have a look, the logins are above.

#12

I also saw that http://demo.theme.co/integrity-1/ has somewhat a similar building style, two columns with image and text, but here the text and image alternate properly on mobile (text, image, text, image) and the gaps work properly on mobile. Thank you.

#13

Hi There,

We have achieve it in integrity demo by utilizing HIDE BASED ON SCREEN WIDTH settings. It is available on Section/Row Customize tab > HIDE BASED ON SCREEN WIDTH. One ROW with 2 columns are set to be hidden on small screen and then another ROW with just one column is set to be hidden on large screen. This way, we have total control on padding, margins , and content per screen size. Try this approach to solve your responsive content issue.

Hope this helps.

#14

Thank you! I will have a look now.

#15

Any idea how I can achieve this kind of drop down

#16

Hi There,

Please provide the URL of the specific page to clarify.

Thanks

#17

Sorry, of course: https://prezi.com/product/

#18

Hi again,

You can achieve this using Classic Tabs element with some Custom CSS to match the design, please see https://theme.co/apex/forums/topic/styling-of-tabs/ and https://theme.co/apex/forums/topic/customize-tabs-with-icons-and-remove-border/ to get started.

Cheers!

#19

Works beautifully!

How can I modify it further as to align the text to the left and possibly add a picture and a button.
Like this example

#20

Hi there,

Would you mind providing the URL of the page you’re currently working on? As for alignment, are you referring to the tab nav and content? And you can always add a button under the tab elements. Or are you referring to the button overlaying on the image background?

Thanks!

#21

I mean the modified, frameless tabs, what do I need to add for the title to appear left aligned and to add a button underneath the text.
Also like in the example (https://prezi.com) could I change the color of the active tab and underline it?
Thank you!

#22

Hi there,

You can add a button shortcode to your tab content under the text, like from here http://demo.theme.co/integrity-1/shortcodes/buttons/

About the alignment and spaces, please add this CSS to your global custom CSS.

.x-tab-content .x-tab-pane {
    padding: 4% 0 !important;
}
.x-nav-tabs>li {
    text-align: left !important;
}
.x-nav-tabs>li>a {
    padding-left: 0 !important;
}

Thanks!

#23

Thank you so much! Works perfectly:) Really appreciate!

#24

Glad we could help.

Cheers!

#25

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.