Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 29, 2017 at 11:38 pm #769164
    Drebosio

    Hi all,

    Sorry if this has been asked, did a search and couldn’t find what i was after.

    This was close, but not exactly what i’m after

    Is it possible to change the text to an icon when the navbar sticks to the top of the page? I am able to add the icons i want to the navbar no problem, but what would be idea is when the navbar hits the sticky part the text just changes to the icon, and vice versa, when it unsticks it only displays the text.

    Site info below

    Thanks,

    March 31, 2017 at 6:21 pm #770120
    Drebosio

    I know there has been alot of posts/questions so things get backlogged, but bumping this to get an update if possible

    March 31, 2017 at 7:38 pm #770142
    Basilis

    Hey!

    You can to change the next of the navbar, for example ” Home ” to an icon?
    Is that what you do need?

    Best regards,
    Basilis

    March 31, 2017 at 8:31 pm #770159
    Drebosio

    Hi Basilis,

    yep that’s what i’m wanting to do :)

    April 2, 2017 at 10:37 pm #770758
    Drebosio

    Seeing if there is any update to this?

    Also is it possible to manipulate the text to change to the icon when the header “sticks” via the CSS?

    April 4, 2017 at 2:30 pm #771790
    Yigit

    Hi,

    Please go to Appearance > Menus and replace navigation label for your homepage with – https://pastebin.com/Mg89WQS2

    Best regards,
    Yigit

    April 4, 2017 at 5:24 pm #771878
    Drebosio

    Hi Yigit,

    This is partially what I want to do, i’m already able to change the text to the icon as mentioned in my original post, but what I was more after is when the nav sticks to the top, that’s when the text changes to the icons.

    Is this possible with CSS or do i need to manipulate with Jquery/JS?

    If possible with CSS, what do i need to target?

    Thanks,

    April 4, 2017 at 10:31 pm #772042
    Yigit

    Hi,

    Please add navigation label as following

    
<span class="av-icon-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> <span class="menu-text">Home</span>

    and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .header-scrolled .av-main-nav .menu-text, .av-main-nav .av-icon-char { opacity: 0!important; }
.header-scrolled .av-main-nav .av-icon-char { opacity: 1!important; }

    Best regards,
    Yigit

    April 4, 2017 at 11:10 pm #772067
    Drebosio

    Hey Yigit,

    This is exactly what i was after.

    Thankyou!!

    April 5, 2017 at 1:32 am #772115
    John Torvik

    Hi,

    Let us know if you have any other questions or issues :)

    Best regards,
    John Torvik

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.