Home Forums Porto Template top user/role/time issue

This topic contains 7 replies, has 2 voices, and was last updated by  Support2 1 week, 6 days ago. This post has been viewed 88 times

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10029957

    pellesoft
    Participant

    Hi, thanks for all valuable help so far, you are great!

    A question, i have tried to mix some code and builded a user/role/time header, that could be seen at https://ellevio.pellesoft.se/kund/index.html

    The issue i now have is this, when scrolling down – google crome hides it. But on safari/mac – its still there. Is this something that is wrong with my safari-browser or is this something else that you can help me understand that i have done wrong?

    The code..

    <!– hanterar användarroll och profil –>
    <div class=”header-row”>
    <nav class=”header-nav-top”>
    <ul class=”nav nav-pills”>
    <li class=”nav-item dropdown nav-item-left-border d-none d-sm-block nav-item-left-border-remove nav-item-left-border-md-show”>

    <i class=”fas fa-user”></i> Fredrik Blåvall
    <i class=”fas fa-angle-down”></i>

    <div class=”dropdown-menu text-3″ aria-labelledby=”dropdownLanguage”>
    <i class=”fas fa-user-friends”></i> Fredrik Blåvall
    <i class=”fas fa-user-friends”></i> Henrik Larsson
    <i class=”fas fa-user-friends”></i> Greta Thunberg
    <i class=”fas fa-user-times”></i> Logga ut
    </div>

    <li class=”nav-item dropdown nav-item-left-border d-none d-sm-block nav-item-left-border-remove nav-item-left-border-md-show”>

    <i class=”fab fa-redhat”></i> Privatperson
    <i class=”fas fa-angle-down”></i>

    <div class=”dropdown-menu text-3″ aria-labelledby=”dropdownLanguage”>
    <i class=”fas fa-user-lock”></i> Administratör
    <i class=”fas fa-user”></i> Privatperson
    <i class=”fas fa-wheelchair”></i> God man
    <i class=”fas fa-industry”></i> Företag
    <i class=”fas fa-user-shield”></i> Superuser
    </div>

    <li class=”nav-item nav-item-anim-icon d-none d-md-block nav-item-left-border text-1″>
    <i class=”far fa-clock”></i> 10 jun 2019 15:22

    </nav>
    </div>
    <!– slut –>


    #10029960

    Support2
    Keymaster

    Hello Pelle,

    When use the header effect “shrink” with a top bar like the nav with user/role/time we recommend this HTML:
    https://pastebin.com/raw/S5gFYeju

    * Note that we added the nav user/role/time inside a <div class="header-top">.
    * This should solve your issue om Mac.

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10029961

    pellesoft
    Participant

    Hi Rodrigo, thanks for your suggestion. However, i do not like that the header-section becomes so high, it takes too much place of the screen. Best would be to place it “centered under the menu items and over the image” – but it seems that i cannot make it happen without messing all up, or do you think it’s possible? 🙂 i have tried to use top: -20px on the “<div id=”credentials” class=”header-row”>” but it does not move upward … Its ok not to be minimized when scrolling up .. just to be handled when the screen gets smaller as it does now.

    If that is not possible, You wrote that the header-top solved the issue om mac, i can see the same result in IE on Windows. So there must be something else, i use google crome 74.0.3…. for mac and there it works perfectly, but safari does not do the same. I can send you a film if you want to see the differences.

    Another question, when using the menus for user and roles, there are a small top arrow in the top of the dropdown on the right side of the list, could that be set to the left. Now it looks like the arrow is pointing to the next item (hope i explained that ok) 🙂

    Best regards and thank you so much for all amazing support!
    Pelle


    #10029962

    pellesoft
    Participant

    I think i fixed the arrow that was presented on the right side instead of the left side, i changed it in custom.css

    /* sätter pil på droplista för roll åt vänster */
    #header .header-nav-top .dropdown-menu:before {
    left: 20px;
    }

    Is that correct approach?


    #10029969

    Support2
    Keymaster

    Hello Pelle,

    If you do not want use the header-top our suggestion for you is don’t use the “header-effect-shrink” on the sticky header. Instead of it you can use a sticky header like on this example: http://preview.oklerthemes.com/porto/7.5.0/index-classic.html (where you can define the stickyStartAt and stickySetTop). In that way when you scroll down the user/role/time will stay correctly positioned.

    Regarding the header-top issues on Safari Mac we couldn’t reproduce this issue. In our tests on this page http://preview.oklerthemes.com/porto/7.5.0/feature-headers-flat-top-bar.html it’s working normally in all browsers. We tried to test your website but we saw that you removed the user/role/time.

    Regarding the CSS for the arrow position, yes this is a correct approach.

    Kind Regards,

    Rodrigo.


    #10029976

    pellesoft
    Participant

    Hi Rodrigo, thanks so much again!

    I tried your second suggestion- feature-headers-flat-top-bar-top-borders.html
    I think that i will go with that, it solves the design pretty good.

    https://ellevio.pellesoft.se/kund/

    Right now, i am very close to nirvana!!

    I have a trick question if you are interested to see what could cause the issue ..

    When using the textscroller ( the words that changes) .. and i use another language – they are getting crazy so i had to set “notranslate” on theme, i have removed that now so that you could see it. Change the language to english and see what happens.

    Same goes with the text that floats in … under the animated ELLEVIO letters on first page ..

    Best
    Pelle


    • This reply was modified 1 week, 6 days ago by  pellesoft.
    #10029978

    pellesoft
    Participant

    A off-topic again, as you know the code base best, is there any source within the library that i can use to update the date/time and clock in upper right corner hh:ss on the front page, sample 3 are the closest solution?

    https://codepen.io/iiSeptum/pen/cwHeL
    https://stackoverflow.com/questions/43097638/blink-the-time-like-a-real-digital-clock

    Regards
    Pelle


    #10029981

    Support2
    Keymaster

    Hello Pelle,

    Great!

    Regarding the Word Rotator unfortunately this is a complicated issue and will require a lot of time to solve and it’s caused by the custom translate code you are adding on the project and not by a bug/issue with the template. Because of that this type of issue is out of our support scope.

    Inspecting your code we saw that the translator code is duplicating the word rotator. Our suggestion is search for a JS callback on the translator code where you can detect when is a word rotator element and then do the necessary adjustments. This will require an advanced knowledge with JS.

    Regarding the Javascript/jQuery clock: Any of those 3 examples are good. All of them uses the Date() of javascript that is the correct way.

    Hope this helps.

    Kind Regards,

    Rodrigo.


Viewing 8 posts - 1 through 8 (of 8 total)