Agency Demo - Help Needed

Hi, we are building a site based on the Agency demo, but have a couple of items we aren’t clear on.

  1. The menu bar has a horizontal divider line above it, and vertical dividers between each nav item. How do we change the colour of these dividers?

  2. The About page in the demo has a 4 image grid about halfway down the page (Design, Strategy, Digital, Marketing) - we want to recreate this look as a single row 3 column layout on the home page, but cannot find the right elements to use - how would we do this? Each of the three columns will have a background image with icon, title and text.

See navbar screenshot below:

Thanks in advance,

David

Hello @dfardon,

Thanks for asking. :slight_smile:

  1. To change menu divider color, please add following CSS under X > Launch > Options > CSS:

.x-navbar .desktop .x-nav>li>a{border-right: 1px solid rgba(255,255,255,0.5;}

.x-logobar{border-bottom: 1px solid rgba(255,255,255,0.5;}

.x-navbar {border-bottom: 2px solid rgba(255,255,255,0.5);}

  1. It’s a two column layout that’s using Cornerstone Clasic Icon, custom headline and Raw content element.

Thanks.

Thank you Prasant,

That’s all good!

Just one thing - when using the Classic Icon element, I am unable to change the icon size via the
“Icon Size & Background Size” field or centre the icon. Is there a way to add icons that would give me more control over the appearance of the icon? How would we add an icon without using the Classic Icon element?

Thanks

David

Hi There,

You can try using the shortcode version instead. Refer to the guide here (http://demo.theme.co/integrity-1/shortcodes/icons/).

Example:
[x_icon style="color:red;font-size:64px" type="adjust"]

Thanks!

That’s exactly what I was looking for, thank you very much!

David

You’re welcome, David.

Hi Jade & Prashant - can I ask where exactly in the CSS window would you post that code? I’m trying to change the divider colour to black (header background is white). I’m a total noob at code/web design.

Many thanks in advance!
Harry

Hi There,

Please refer to the screenshot here (https://snag.gy/7Qkus5.jpg).

Hope that helps.

Hi mldarshana

Thanks for your reply - I can see that CSS section, what I’m not sure about is where to paste the code once that window is open. What line should it go into? Or can I just paste it at the bottom underneath everything else that’s in there?

Many thanks

Hi There,

You can simply paste your code into the bottom underneath existing code.

Hope that helps.

Awesome, thanks for your help. Incidentally I had to add the second ) sign for the first two lines, not sure if that’s meant to happen but it didn’t show up on the header until I added that.

Thanks again!

You’re welcome!

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