This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

customization of header and footer

Open 13 replies customizationthemetheme-vantage
Amit Pradhan
10 years ago · Last reply by Support Assistants 10 years ago

I am using vantage premium and facing difficulty in customization. on header after adding contents it is being overlapped by menu bar. Also I am failed to align the contents to top in header.

In footer I using BNS add widget for disclaimer, other content and copyright. Please guide how to customize it. Also I want to customize footer 4 widgets in a row. On adding the widgets beyond four it starts accomodating the widgets in the same row instead of next row.

Please guide.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

13
  1. Support Assistants 10 years, 2 months ago

    Hi Amit

    You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* Vantage Header Responsive Breakpoint */
@media (max-width: 960px) {
  body.responsive header#masthead .hgroup {
    text-align: center;
  }
  body.responsive header#masthead .hgroup .logo {
    float: none;
  }
  body.responsive header#masthead .hgroup .logo img {
    margin: 0 auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  body.responsive header#masthead .hgroup .support-text,
  body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive header#masthead .hgroup .support-text img,
  body.responsive header#masthead .hgroup #header-sidebar img {
    max-width: 100%;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar .widget {
    display: block;
    margin: 0 auto;
    float: none;
  }
}

    You might also need to install the SiteOrigin CSS Editor.

    With regards to the footer layout. Please, add the additional widgets you require at Appearance > Widgets > Footer. We’ll help split the footer widget area into a second row once this has been done.

    Thanks

  2. Amit Pradhan 10 years, 2 months ago

    Dear Sir / Madam,

    My reply/ feedback as below.

    1. CSS editor was already installed.
    2. Added CSS code provided you.
    3. After adding css code, it spoiled the layout in firefox.
    4. PAypal logo still not aligned properly. screen shot enclosed below.
    5. Added two more widgets at footer.
    6. Need single row at footer to diplay disclaimer and other necessary text contents. you may visit http://www.rypm.in for better clarity.

    Looking forward your support guidance to proceed further.

    [image: Inline image 2]

  3. Support Assistants 10 years, 2 months ago

    Thanks for your feedback.

    To send images, please, reply directly on the SiteOrigin forum thread and use the Add Media button to upload your media.

    Please, ignore the CSS originally sent. We hadn’t seen your site before you sent the link in your last reply.

    At Appearance > Custom CSS you have the following rule:

    body.responsive.layout-full #page-wrapper .full-container {
    padding-top: 5px;
    padding-bottom: 5px;
}

    Please, change that to:

    body.responsive.layout-full #main .full-container {
    padding-top: 5px;
    padding-bottom: 5px;
}

    If you need to shift the PayPal logo up a little further, edit the SiteOrigin Editor widget and using the Text tab view, remove the empty paragraph tag.

    After which footer widget do you want the new row to start? After the Legal heading? Should the next widget be on a new row?

  4. Amit Pradhan 10 years, 2 months ago

    Dear Sir/ MAdam,

    Thanks for the support. Replaced the code as instructed by you. Now alignment is much better at header.

    Secondly, at footer I need 4 widgets per row. Any widget added thereafter should go in second or next row. The last row should only one widget to cover total page width to have disclaimer , copyright and other informations.

  5. Support Assistants 10 years, 2 months ago

    Give this a try:

    #footer-widgets .widget {
    margin-bottom: 25px;
    width: 25%;
}
#footer-widgets .widget:last-of-type {
    margin-bottom: 25px;
    width: 100%;
}
  6. Amit Pradhan 10 years, 2 months ago

    Dear Sir/ Madam,

    Tried solution given for the footer. the Feedback is as below.

    Last widget with row width 100% is working well. Now copyright, disclaimer and other text is therefore aligned as requested. Thnaks for this support.

    4 widget per now is yet to be set. If we add 5th widget then it goes below the 4th one in the same row. If we add 6th widget then it goes to next row below widget first. This needs tobe fixed.

  7. Support Assistants 10 years, 2 months ago

    Please, add a fifth and six widget so we can see the problem. Thanks.

  8. Amit Pradhan 10 years, 2 months ago

    Dear Sir/ Madam,

    Just added meta and events to show you the problem.

  9. Support Assistants 10 years, 2 months ago

    Try adding:

    #footer-widgets .widget:nth-of-type(5n) {
    clear: both;
}
  10. Amit Pradhan 10 years, 2 months ago

    Dear Sir /Madam,

    Tried adding the code, and it has resolved the problem.

  11. Support Assistants 10 years, 2 months ago

    Thanks for the update. We’re glad to hear the new CSS rule helped.

  12. Amit Pradhan 10 years, 1 month ago

    Dear Sir / Madam,
    Though CSS footer has resolved the desktop view however it has deterioarted the mobile view/ layout. Request your intervention to correct it for mobile view too.

    Just as a piece of information, earlier the mobile layout was responsive and okay.

    Need your support to correct it. Screen shot of mobile is again attached for your reference.

    Screenshot_2015-12-28-21-46-52

    Screenshot_2015-12-28-21-47-02

  13. Support Assistants 10 years, 1 month ago

    Try adding something like:

    @media (max-width: 780px) {
	#footer-widgets .widget {
	    width: 100%;
	}	
}

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread