New Landing › How can we help? › Themeforest Theme Support › Uplift › Sticky header resizing

Viewing 15 posts - 1 through 15 (of 15 total)
  • Back to forum
    Posted in: Uplift
  • January 4, 2017 at 3:55 pm #308840
    Karenborgers
    Member
    Post count: 33

    The header is resizing minimal, I would like to resize it more (55 px), and even show an other, smaller logo.
    How can i chance the settings for this?

    Now I have selected: Sticky header/on, Sticky header resizing/on, Sticky header show/hide/on.
    but the effect is not big enough.

    Thanks in advance!

    Attachments:
    You must be logged in to view attached files.
    January 5, 2017 at 5:35 pm #309003
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    To re-size to an even smaller header size, you can use this:

    .resized-header #logo img {
  max-height: 80px!important;
}
.full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link {
    height: 60px;
    line-height: 35px;
}
.resized-header #header,  
.resized-header .float-menu,
.resized-header #header-sticky-wrapper {
    height: 90px!important;
}

    Which would provide this:

    January 10, 2017 at 2:39 pm #309484
    Karenborgers
    Member
    Post count: 33

    Thank you!
    I resized by changing the numbers, but i got some dificulties.

    Last questions:
    1. By the full header at the beginning the menu is now also floating top.
    2. The search icon is not moving up
    3. How can i replace the logo for an other one, just for the smaller menu?

    this is the code I used:
    .resized-header #logo img {
    max-height: 40px!important;
    }
    .full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link {
    height: 55;
    line-height: 35px;
    }
    .resized-header #header,
    .resized-header .float-menu,
    .resized-header #header-sticky-wrapper {
    height: 55px!important;
    }

    Attachments:
    You must be logged in to view attached files.
    January 11, 2017 at 3:33 pm #309691
    David Martin – Support
    Moderator
    Post count: 20834

    Please remove all your code tweaks and use this, I also notice you have a CSS error where you have not added px:

    .resized-header #logo img {
  max-height: 80px!important;
}
.full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link {
    height: 119px;
    line-height: 119px;
}

.full-center.resized-header #main-navigation ul.menu > li > a, 
.full-center.resized-header nav.float-alt-menu ul.menu > li > a, 
.full-center.resized-header nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item,
.full-center.resized-header #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link{
    height: 60px!important;
    line-height:45px!important;;
}

.resized-header #header,  
.resized-header .float-menu,
.resized-header #header-sticky-wrapper {
    height: 90px!important;
}
    January 11, 2017 at 4:55 pm #309718
    Karenborgers
    Member
    Post count: 33

    Doesn’t do the thing unfortunaly.

    – The menu text is not inplace in the ‘normal’ header.
    – And in the resized header it is not on top, and also the search icon doesn’t go up. White space had to be around 55px.
    – Also the secondmenu blocks are not attaced to the menu.

    I like it if the logo stay’s big and overlaps the body.
    sow that can stay if posible.

    Used this code for the example (had to remove it now for the client):

    .resized-header #logo img {
    max-height: 80px!important;
    }
    .full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link {
    height: 119px;
    line-height: 119px;
    }

    .full-center.resized-header #main-navigation ul.menu > li > a,
    .full-center.resized-header nav.float-alt-menu ul.menu > li > a,
    .full-center.resized-header nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item,
    .full-center.resized-header #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link{
    height: 60px!important;
    line-height:45px!important;;
    }

    .resized-header #header,
    .resized-header .float-menu,
    .resized-header #header-sticky-wrapper {
    height: 55px!important;
    }

    Attachments:
    You must be logged in to view attached files.
    January 11, 2017 at 5:31 pm #309728
    David Martin – Support
    Moderator
    Post count: 20834

    During my testing this worked ok, please remove all your code. Can I login and implement this?

    January 11, 2017 at 6:07 pm #309748
    Karenborgers
    Member
    Post count: 33

    yes please!

    Only leave the code for the text size in the footer.

    Thanx a lot

    January 11, 2017 at 6:56 pm #309769
    David Martin – Support
    Moderator
    Post count: 20834

    Just to clarify before, what do you mean by this?

    Only leave the code for the text size in the footer.

    January 12, 2017 at 10:36 am #309830
    Karenborgers
    Member
    Post count: 33

    I made the text size in the footer smaller by CSS.
    So before you delete all the code, i want to make sure you saw that 🙂

    January 12, 2017 at 1:38 pm #309878
    Karenborgers
    Member
    Post count: 33
    This reply has been marked as private.
    January 13, 2017 at 4:10 pm #310080
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    To re-size the header further and to swap out the logo use this, you need to replace the logo URL below with your new logo for the small header:

    .resized-header #logo img {
  max-height: 80px!important;
}
.full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link, .full-center .float-menu{
    height: 119px;
    line-height: 105px;
}

.full-center.resized-header #main-navigation ul.menu > li > a, 
.full-center.resized-header nav.float-alt-menu ul.menu > li > a, 
.full-center.resized-header nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item,
.full-center.resized-header #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link{
    height: 50px!important;
    line-height:5px!important;;
}

.resized-header #header,  
.resized-header .float-menu,
.resized-header #header-sticky-wrapper {
    height: 60px!important;
}

.resized-header #logo.has-img a > img {
    display: none;
}
.resized-header #logo.has-img a:after {
  position: absolute;
  top: 13px;
  display: block;
  content: '';
  width: 200px;
  height: 30px;
  line-height: 30px;
  background-image: url("http://www.natuurlijk-scharrelvlees.nl/wp-content/uploads/2017/01/Natuurlijk-scharrelvlees-logo-witteachtergrond.png");
  background-repeat: no-repeat;
}

    One of the reasons you are struggling to get things work is you have CSS errors, I have had to fix these for you.

    January 16, 2017 at 9:59 am #310213
    Karenborgers
    Member
    Post count: 33

    Thanxs a lot! That made it work, only a few dificulties left:

    1. The search icon is not moving with it. Do you have a solution for that?

    2. Also I would like to have the mobile menu apearing by 1380, so the menu items are not on 2 lines on a smaller screen.
    I can only set it to portret or landscape. And I don’t want to use the Max menu because I like yours more.

    3. When moving to mobile view, the tekst is behind the header.

    That will solve it all i think 🙂

    Attachments:
    You must be logged in to view attached files.
    January 17, 2017 at 5:59 pm #310466
    David Martin – Support
    Moderator
    Post count: 20834

    1) Yes, you could test this:

    .resized-header #logo img {
  max-height: 80px!important;
}
.full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link, .full-center .float-menu {
    height: 119px;
    line-height: 105px;
}

.full-center.resized-header #main-navigation ul.menu > li > a, 
.full-center.resized-header nav.float-alt-menu ul.menu > li > a, 
.full-center.resized-header nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item,
.full-center.resized-header #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link,
.full-header-stick.resized-header .header-right  {
    height: 50px!important;
    line-height:5px!important;;
}

.resized-header #header,  
.resized-header .float-menu,
.resized-header #header-sticky-wrapper {
    height: 60px!important;
}

.full-header-stick.resized-header .header-right {
    height: 60px!important;
    line-height: 5px!important;
}

.resized-header #logo.has-img a > img {
    display: none;
}
.resized-header #logo.has-img a:after {
  position: absolute;
  top: 13px;
  display: block;
  content: '';
  width: 200px;
  height: 30px;
  line-height: 30px;
  background-image: url("http://www.natuurlijk-scharrelvlees.nl/wp-content/uploads/2017/01/Natuurlijk-scharrelvlees-logo-witteachtergrond.png");
  background-repeat: no-repeat;
}

    2) You would need to hire a developer to make that more complex modification for you.

    3) Please test this:

    .mh-overlay #mobile-menu {
    padding: 35px 30px 200px;
}
    January 18, 2017 at 10:31 am #310529
    Karenborgers
    Member
    Post count: 33

    Thanks for working it out!

    January 18, 2017 at 10:34 am #310530
    David Martin – Support
    Moderator
    Post count: 20834

    Glad to help.

  • Back to forum
    Posted in: Uplift
Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register