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, 8 months ago ago by Robert Hall

  • Avatar: BirgitAllerte
    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.
    19 Answers
    Avatar: Robert Hall
    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.

    Avatar: BirgitAllerte
    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.
    Avatar: Brian Johnson
    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

    Avatar: BirgitAllerte
    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.
    Avatar: BirgitAllerte
    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

    Avatar: BirgitAllerte
    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

    Avatar: BirgitAllerte
    BirgitAllerte
    Participant
    April 20, 2015 at 10:27

    Hello Staff,

    Can anyone help me today please?

    Thanks!
    Birgit

    Avatar: Brian Johnson
    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

    Avatar: Brian Johnson
    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

    Avatar: BirgitAllerte
    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

    Avatar: Brian Johnson
    Brian Johnson
    Member
    April 20, 2015 at 12:55

    Hello

    Have you tried the solution from the previous post.

    With best regards
    Brian Johnson

    Avatar: BirgitAllerte
    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

    Avatar: BirgitAllerte
    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.
    Avatar: BirgitAllerte
    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.
    Avatar: Brian Johnson
    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

    Avatar: BirgitAllerte
    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

    Avatar: Robert Hall
    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.

    Avatar: BirgitAllerte
    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

    Avatar: Robert Hall
    Robert Hall
    Support staff
    April 20, 2015 at 16:50

    Hello @BirgitAllerte,

    You’re welcome!
    Have a nice day!

    Regards,
    Robert Hall.

  • Viewing 20 results - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.