Return to previous page

Custom code to change header and stick a part of the homepage

This topic has 20 replies, 3 voices, and was last updated 9 years ago ago by Robert Hall

BirgitAllerte

Participant

April 17, 2015 at 02:53

Hi,

Can you please help me to custom some parts of my theme too meets my clients needs. I have designed a onepage landing page. But my client want a fix header, it have to be sticky (without the wrapper effect). I have do some codes and remove the small header. Can you please take a look at my demo-site and the website showing a example of what my client wants. I have make a (green) line in VC to show you the effect that I want to create in the menu bottom-border. Just like the example website but with a 2 px line.

Please, contact administrator
for this information.

#57588 Copied

19 Answers

Robert Hall

Support staff

April 17, 2015 at 07:38

Hello,

Please provide us with password to the site and wp-admin access in Private Content.

Regards,
Robert Hall.

#57607 Copied

BirgitAllerte

Participant

April 17, 2015 at 10:38

Hi Robert,

Thank you for the swift replay! I have sent you a private message.

Kind regards

Please, contact administrator
for this information.

#57660 Copied
Brian Johnson

Member

April 17, 2015 at 15:30
Hello

1/3 Please add this code into the style.css of the Child Theme:
```
.header-logo{display:none}
.navbar-collapse{margin-right:auto!important;margin-left:auto!important;width:900px!important}
.navbar-collapse ul {margin-right:auto!important;margin-left: auto!important;width:700px;height:0px;text-align: center!important;}
.navbar-collapse ul li{display:inline-block!important;float:none!important;}
.navbar-right{display:none!important}
```
2.Please provide us with screenshots of sticky header from that site because it is not reachable. You may use this service for it:http://prntscr.com/.

With best regards
Brian Johnson
#57753 Copied
BirgitAllerte

Participant

April 17, 2015 at 16:57

Hi Robert,

Thank you for the code.

I have sent you a private message.

Thanks!

Regards,
Birgit

Please, contact administrator
for this information.

#57776 Copied

BirgitAllerte

Participant

April 19, 2015 at 23:38

Hello Robert,

My client change his wishes for the layout. I have removed and replace the logos to the footer, so that part dont have to be sticky anymore!

Now I only have to create one sticky/fixed/static menu (without the second wrapper menu), just like the example of the website I have sent you. Height of the menu 68px, with a menu-border-bottom: 2px solid #2D9E7C. Please, the menu-text have to be in the center/middle of the menu.

I want to custom the menu text, but the code I added in the child-stylesheet dont work. In the live screen it works fine, see style CSS and the code below:

—————————————–
change fontsize and remove text-transform
—————————————–
.menu > li > a {
font-size: 17px;
text-transform:none!important}

Thanks in advance for your help!

Kind regards,
Birgit

#57942 Copied

BirgitAllerte

Participant

April 20, 2015 at 09:55

Hello Robert,

Can you please help me today to customize the header, I have a deadline.

Thanks!

Birgit

#57997 Copied

BirgitAllerte

Participant

April 20, 2015 at 10:27

Hello Staff,

Can anyone help me today please?

Thanks!
Birgit

#58007 Copied

Brian Johnson

Member

April 20, 2015 at 10:36

Hello

Sorry for the long delay with answer. Currently we are working on your site. We will reply as soon as possible. Thank you for understanding.

With best regards
Brian Johnson

#58012 Copied
Brian Johnson

Member

April 20, 2015 at 11:09
You may put this code into the style.css instead of the last one which you showed me as an example:
```
.fixed-header-area{display:none}

.header-wrapper {position:fixed !important;height: 68px;top:0;border-bottom:2px solid #4BB1A4;  width: 100%;  z-index: 10000;
  background-color: #FFF;
  min-height: 70px;}
```
With best regards
Brian Johnson
#58022 Copied
BirgitAllerte

Participant

April 20, 2015 at 11:25

Hello,

Thank you Brian for your reply. Your team is very helpfull and I appreciate you guys, because I think you provide a great service. I look forward to your solution.

Kind regards,
Birgit

#58023 Copied

Brian Johnson

Member

April 20, 2015 at 12:55

Hello

Have you tried the solution from the previous post.

With best regards
Brian Johnson

#58047 Copied

BirgitAllerte

Participant

April 20, 2015 at 13:28

Hello Brian,

I have tried everything it does’nt work. The previous code only center the menu buttons (horizontal). I have added that code in my Child-theme.

I have sent you a wp login in a private message.

Kind regards,
Birgit

#58055 Copied

BirgitAllerte

Participant

April 20, 2015 at 13:57

Hello Brian,

The login I have sent you before on friday. See private message.

Regards,
Birgit

Please, contact administrator
for this information.

#58059 Copied

BirgitAllerte

Participant

April 20, 2015 at 14:04

See the private message for the codes I have added in the child-theme.

Regards,
Birgit

Please, contact administrator
for this information.

#58061 Copied
Brian Johnson

Member

April 20, 2015 at 14:58
You may try to add following code into the style.css:
```
.fixed-header-area{display:none}

.header-wrapper {position:fixed !important;height: 68px;top:0;border-bottom:2px solid #4BB1A4;  width: 100%;  z-index: 10000;
  background-color: #FFF;
  min-height: 70px;}
```
We are hiding fixed header and making main header to be sticky as in your demo site.

With best regards
Brian Johnson
#58080 Copied
BirgitAllerte

Participant

April 20, 2015 at 16:09

Hello Brian,

Thank you very much for the code! It works now, the header is fixed! I have to custom some px size to get the height I want, but the code works perfect!

Now I only need the code to get a “regular” font in the menu, no “uppercase text tranform” to a capital font! When I remove “uppercase” in the live screen, I got what I want, but the code does’nt work in my stylesheet.

See below

text-transform: uppercase;

Thanks in advance!

Kind regards,
Birgit

#58116 Copied
Robert Hall

Support staff

April 20, 2015 at 16:18
Hello,

Please add this code in style.css of the Child Theme.
```
.menu > li > a{
  text-transform: none;
}
```
Regards,
Robert Hall.
#58122 Copied
BirgitAllerte

Participant

April 20, 2015 at 16:47

Hello Robert,

Thank you all very much for the support, everything works perfect!

My client will buy the theme to get his own licence!

Kind regards,
Birgit

#58133 Copied

Robert Hall

Support staff

April 20, 2015 at 16:50

Hello @BirgitAllerte,

You’re welcome!
Have a nice day!

Regards,
Robert Hall.

#58135 Copied
Tagged: custom code, header change, homepage sticky, persuasive writing, woocommerce wordpress
Viewing 20 results - 1 through 20 (of 20 total)