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, 9 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.
    #57588 Copied
    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.

    #57607 Copied
    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.
    #57660 Copied
    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

    #57753 Copied
    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.
    #57776 Copied
    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

    #57942 Copied
    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

    #57997 Copied
    Avatar: BirgitAllerte
    BirgitAllerte
    Participant
    April 20, 2015 at 10:27

    Hello Staff,

    Can anyone help me today please?

    Thanks!
    Birgit

    #58007 Copied
    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

    #58012 Copied
    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

    #58022 Copied
    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

    #58023 Copied
    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

    #58047 Copied
    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

    #58055 Copied
    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.
    #58059 Copied
    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.
    #58061 Copied
    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

    #58080 Copied
    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

    #58116 Copied
    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.

    #58122 Copied
    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

    #58133 Copied
    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.

    #58135 Copied

  • Tagged: , , , ,

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

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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Finances – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion 03 Store – WordPress WooCommerce Theme
lazy-placeholder
Watches Store – WooCommerce Theme
lazy-placeholder
Spice Store – WordPress WooCommerce Theme
lazy-placeholder
HandMade Store – WooCommerce Theme
lazy-placeholder
Designers – WordPress WooCommerce Theme
lazy-placeholder
Interior Store – WooCommerce Theme
lazy-placeholder
Animals Store – WooCommerce Theme
lazy-placeholder
Barbershop – WordPress WooCommerce Theme
lazy-placeholder
Cocktails Store – WordPress WooCommerce Theme

See All Templates

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