Which stack will work best for this design

Support
#1

Hi,

We would like to create a website as per the attached mock ups. Could you please let me know which stack would work best? I’ve tried integrity, but can’t seem to amend the header/footer colours and images.

#2

Hi Anna,

Thank you for writing in, I think Renew or Icon as a flat and minimal stack will work nicely on that.

Hope that helps,
Cheers!

#3

Thanks @friech
I have tried Renew and it seems to work well for this.
Can you please advise how I can get an image in the header background (above and below) as per my initial image and also for the white area of the logo to extend all the way to the left of screen?

#4

Hello There,

Thanks for updating in!

To add an image and move your logo to the left of the screen, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.masthead.masthead-inline:before,
.masthead.masthead-inline:after {
    content: "";
    display: block;
    height: 120px;
    background: url(//placehold.it/1200x1200/) center no-repeat/cover;
}

.x-navbar .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

Hope this helps. Kindly let us know.

#5

Thanks! Is it possible to have the one image that stretches above and below the header (rather than repeating above and below?

Also, with the menu, is there code to make the hover/selected menu item bold?

#6

Hi There,

Please update the previous CSS to this:

.masthead.masthead-inline{
    padding: 150px 0;
    content: "";
    display: block;
    height: auto;
    background: url(//placehold.it/1200x1200/) center no-repeat/cover;
}

.x-navbar .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

Also add this custom CSS:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
     font-weight: bold;
}

Hope it helps :slight_smile:

#7

Hi, thanks for your help. I’m happy with the logo extending all the way to the left edge, but how can I pad out the menu so that it’s not touching the right edge?

#9

Hi,

You can add a margin to your nav.

Please add the code below in Theme Options > CSS

.masthead-inline .desktop .x-nav {
    margin-right: 30px;
}

Thanks

#10

thank you!

how can I add vertical lines in between my menu items?

#11

Hi,

To add vertical lines, you can add this in Theme Options > CSS

.x-navbar .desktop .x-nav > li > a:after {
    border-right: 1px solid #ccc;
    content: "";
    position: absolute;
    right: 0;
    height: 13px;
}

.x-navbar .desktop .x-nav > li:last-child > a:after {
    border:0;
}

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We are happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation. If you are not comfortable making further changes and if you require more customization on your site, it would be best to get in touch with a developer.

I’ll list below some CSS/HTML resources that should help you to carry on these modifications on your own in the future:

Thank you for understanding.

#12

thank you, appreciate the help

#13

You’re more than welcome, glad we could help.

Cheers!

#14

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