Header and page opacity & social Icons

[Albulushi]

Hello,

1. if you can help me to reduce the opacity of the header to 90% as well for the main content area instead of full white.

2. Is there way to add custom social icons on top right corner above the menu as shown in the example.

[Albulushi]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

To add a background image to your header add this to your custom css:

#header{
background-image:url('myimage.jpg');
}

2. Unfortunately you can not change the themes icons without advanced modification of theme files, which unfortunately is beyond our scope of support

– Kyle

[Albulushi]

Thank for the reply.

I don’t want to have an image just want to reduce the color opacity on the header to 95% not all white same in the main content wrap need to reduce the opacity to 95% so the background will show slightly

[Kyle – SUPPORT]

Add this to your custom css:

#container.boxed-layout {
  background: rgba(255,255,255,0.7);
}
#main-container {
  background-color: transparent;
}
#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
  background: transparent;
}

I recommended using 0.7 instead of 0.95 as you can’t tell with 0.95

– Kyle

[Albulushi]

Hi Kyle,

Thank you it worked.

2. so there is nothing you guys can do to help with social icons on header instead of topbar

3. how can I increase the space in between the menu so it covers the whole header

[Kyle – SUPPORT]

2) Not like that, however you could use the topbar and add the social icons to tb-right config in theme options

3) Add this to your custom css:

nav#main-navigation .menu > li, .header-4 #main-navigation .menu > li, .header-5 #main-navigation .menu > li, .header-7 #main-navigation .menu > li {
  padding: 0 30px 20px;
}

– Kyle

[Albulushi]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

So you want this page header http://www.saffronroadfood.com/new/?page_id=12322
Too look like this one http://www.saffronroadfood.com/new/?product=new-balance-variable-demo

that’s it?

Can you provide us login to your site to check the settings of the elements in Page Builder?

Please send it using private reply.

Best Regards,
Rui

[Albulushi]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi @Albulushi,

You’ll want to use the page heading to make the image full width and at the top, just like you have done on the first page.

If you mean the space above, then simply edit the page, and then check the “Page Meta Options”, and enable the “Remove Top Spacing” option.

Hope that helps.

– Ed