Navigation
Archive / jQuery – Sticky header that shrinks when scrolling down (Page 3)
This is archived content. Visit our new forum.
1 2 3 4 5
  • Author
    Posts
  • May 8, 2016 at 6:05 am #980907
    reelism
    Participant
    This reply has been marked as private.
    May 8, 2016 at 6:40 am #980938
    Christopher
    Moderator

    Hi there,

    Please update this code :

    .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 40px;
padding-top: 60px;
}

    To :

    .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 40px;
    padding-top: 13px !important;
    font-size: 11px;
}

    Hope it helps.

    May 8, 2016 at 11:04 am #981122
    reelism
    Participant

    Great! That worked.

    Yet, the design is now completely broken in latest IE 11.0 Win 7 x64, don’t know if it’s this latest code or theme or what.

    Can u guys check and please advise (login details are above)?

    May 8, 2016 at 4:37 pm #981319
    Rad
    Moderator

    Hi there,

    The bad thing with IE and Edge are they are on latest version but they don’t follow browser’s modern standard. But they aren’t, pseudo selector doesn’t work well with them.

    I added this,

    @media all and (-ms-high-contrast:none){
.home .cs-content > .x-section.bg-video:first-child {
top:-58px;
clear: both;
}
}

    Please check. Thanks!

    May 9, 2016 at 2:29 am #981794
    reelism
    Participant

    Guys – no change on IE, still totally borked – the background image is completely broken.

    Please note that I’ve only used code you guys have provided.

    May 9, 2016 at 3:38 am #981859
    Paul R
    Moderator

    Hi,

    Can you provide us a screenshot on how it looks on your end.

    Thanks

    May 9, 2016 at 6:19 am #982060
    reelism
    Participant

    See attached, exactly the same on live reelists.co

    EDIT: I think this was an IE/Windows issue. I reinstalled and fixed errors (which took ludicrously long), and now it seems to be working. Hurrah!

    May 9, 2016 at 2:01 pm #982821
    Joao
    Moderator

    Great news.

    Glad you figured out.

    Let us know if you need further help.

    Joao

    May 10, 2016 at 3:57 am #983717
    reelism
    Participant

    Ok, so I’m getting broken layout on both IE & Firefox ONLY on localhost.
    The Live site has the exact same custom JS/CSS but works in FF & IE, but the local breaks in both.

    Chrome on Local works fine.

    Not a dealbreaker, but thought i’d check if you guys have any experience with this?

    May 10, 2016 at 6:23 am #983879
    Paul R
    Moderator

    Hi,

    It could be a cache issue, please clear your browser cache and check again.

    If that doesn’t help, you can try removing the js/css codes and see if that fixes the issue.

    If issue persist, there could be another script/plugin that is making your site break.

    May 25, 2016 at 11:42 am #1009367
    reelism
    Participant

    Hi guys other things took me away from this, yet my prior confirmation re: Firefox working ok was WRONG.

    Firefox layout is broken, see the testing live site: http://www.reelists.co
    Please note that so far I’ve only added the customisations you guys have provided.

    Screenshots attached

    Thanks 🙂

    May 25, 2016 at 1:26 pm #1009562
    Joao
    Moderator

    Hi There,

    Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

    – Link to your site
    – WordPress Admin username / password
    – FTP credentials

    Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

    Thanks,

    Joao

    May 26, 2016 at 3:46 am #1010680
    reelism
    Participant
    This reply has been marked as private.
    May 26, 2016 at 4:26 am #1010721
    Lely
    Moderator

    Hi There,

    Thank you for the credentials.
    Please also add the following CSS:

    .home .x-main.full {
    clear: both !important;
}

    Hope this helps.

    May 26, 2016 at 7:00 am #1010914
    reelism
    Participant

    Guys, that changed yet broke anew the menu layout in Firefox, see attached (broke transparency on static menu).

    The CSS I have:

    .x-logobar {
    border-bottom: medium none;
}

.x-navbar {
    border-bottom: medium none;
}

.x-navbar .desktop .x-nav > li > a {
    border-left: medium none;
}

.x-navbar .desktop .x-nav > li:last-child > a {
    border-right: medium none;
}

.x-navbar {
    background-color: transparent !important;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  border-bottom: 0px;
  box-shadow: none !important;
} 

/* fixed top */
.x-navbar.x-navbar-fixed-top {
    background-color: rgba(36, 39, 41,0.3)!important;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 200px;
}

.x-navbar.x-navbar-fixed-top  .x-nav > li > a {
    padding-top: 30px !important;
}

/* remove header gap */
.home .masthead{

height: 0;
}

/* scroll */

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 20px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 100px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 40px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.x-navbar-inner {
transition: all 0.5s ease !important;
-webkit-transition: all 0.5s ease !important;
}

.x-logobar {
    border-bottom: medium none;
}

.x-navbar {
    border-bottom: medium none;
}

.x-navbar .desktop .x-nav > li > a {
    border-left: medium none;
}

.x-navbar .desktop .x-nav > li:last-child > a {
    border-right: medium none;
}

.x-navbar {
    background-color: transparent !important;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  border-bottom: 0px;
  box-shadow: none !important;
} 

/* fixed top */
.x-navbar.x-navbar-fixed-top {
    background-color: rgba(36, 39, 41,0.5)!important;
    color: white;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 200px;
}

.x-navbar.x-navbar-fixed-top  .x-nav > li > a {
    padding-top: 30px !important;
}

/* remove header gap */
.home .masthead{

height: 0;
}

/* scroll */

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 40px;
    padding-top: 13px !important;
    font-size: 14px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 100px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 10px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.x-navbar-inner {
transition: all 0.5s ease !important;
-webkit-transition: all 0.5s ease !important;
}

a.x-brand.img.resize-logo img { width: 134px; transition: 0.3s linear; } a.x-brand.img img { transition: 0.3s linear; } 

@media all and (-ms-high-contrast:none){
.home .cs-content > .x-section.bg-video:first-child {
top:-58px;
clear: both;
}
}
.home .x-main.full {
    clear: both !important;
}
  • Author
    Posts
1 2 3 4 5
  • <script> jQuery(function($){ $("#no-reply-180033 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>