I need help styling Header similar to imaage attached. - Support

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
July 28, 2015 at 5:50 pm #479842

vic98
Participant

Hi,

website URL is
http://www.munarsh.com/aid
I am using child theme of Enfold. I need to style my website header similar to design that can be seen in image in below link
Please the image here
http://www.munarsh.com/aid/wp-content/uploads/2015/07/header-option.jpg

1- how to add a login botton at top right hand side
2- how to display the search bar with social media icon.

Waiting for your kind response.

Thanks

July 28, 2015 at 8:21 pm #479900

Elliott
Inactive Moderator

Hi vic98!

Try doing this, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, to add a widget area to your header.

You can then add some extra elements to your header widget area with a text widget or the search widget. If you need help positioning them around then let us know and we’ll give you some CSS to use.

Best regards,
Elliott

July 30, 2015 at 7:37 pm #480883

vic98
Participant

Hi Elliott,

I followed your instruction and added the widget area to header. Now please have a look to below link
http://courses.wpfirstaid.co.nz/
and let me know how can I style the header similar to design shown in the below link

http://www.munarsh.com/aid/wp-content/uploads/2015/07/header-option.jpg

Waiting for your kind response.

July 31, 2015 at 7:04 am #481107

vic98
Participant

anyone help me please?

July 31, 2015 at 3:57 pm #481418
Elliott
Inactive Moderator
Hi!

Add this to your custom CSS.
```
#header_main #text-3 {
  margin-top: 10px;
}
#header_main #search-3 {
  margin-top: 20px;
}
.social_bookmarks {
  right: 190px !important;
  top: -20px !important;
}
```
Best regards,
Elliott
July 31, 2015 at 5:52 pm #481495

vic98
Participant

Thanks your code, i edit to my css but the problem is exist.
the height of header did not fixed with your code

please have a look two http://courses.wpfirstaid.co.nz/

Please advice how to fixed this issue, please see the design for reference

http://www.munarsh.com/aid/wp-content/uploads/2015/07/header-option.jpg

waiting for your kind response
thanks,

August 3, 2015 at 3:16 pm #482135
Elliott
Inactive Moderator
Hi!

Remove all of the custom CSS your currently using for the header widgets and add this.
```
#header #text-2 {
  position: absolute;
  right: 0px;
  top: 0px;
}
#header_main #text-3 {
  position: absolute;
  right: 0px;
  top: 0px;
}
#header_main #search-3 {
  position: absolute;
  right: 0px;
  top: 0px;
}
```
And play around with the top / right values to move each element around. You will probably need to increase the height of your header in Dashboard > Enfold > Header to make room for them all.

Cheers!
Elliott
August 4, 2015 at 10:49 am #482605

vic98
Participant

Thanks Elliott,

Actually I fixed the header issue already.

Now I need help to expend header and footer background to full width. Please let me know if we can do it while keeping the main content to to 1130px
http://courses.wpfirstaid.co.nz/
Thanks alot for your help in this regard,

August 4, 2015 at 2:38 pm #482700

Yigit
Keymaster

Hey!

Can you please post a screenshot and show the changes you would like to make?

Cheers!
Yigit

August 4, 2015 at 7:30 pm #482917

vic98
Participant

Hi,

here the screenshot that shows what we want.
http://courses.wpfirstaid.co.nz/wp-content/uploads/2015/07/wpfaid.jpg

Current website can be seen here. You can see the layout is set to 1130px but we want the header and footer background to be full width.
http://courses.wpfirstaid.co.nz/

Thanks

August 4, 2015 at 9:32 pm #482986

Basilis
Inactive Moderator

Hi!

The header is inside the wrapper, so that would require some extensive editing.

You can contact one of our Customization Contractors, who will help you out with the process.
http://kriesi.at/contact/customization

Let us know if we could do anything else, regarding our theme

Cheers!
Basilis
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.