Icons not working in Navbar Menu Builder mode.

Comments

12 comments

  • Lucas Tsolakian

    Nope re-tested here and works as expected, we just have to check the icon option in Button settings: also check that the icons are enabled in theme's options. 

    0
    Comment actions Permalink
  • steveb

    Weird, can't get it to work here. See the screenshots. The same button appears top left as in the nav bar. Both same setting,s simply cut and paste job.

     

    You can see the buttons in the edit mode screenshot, then in the preview, one is showing the icon, the other, in the navbar, isn't.

     

    0
    Comment actions Permalink
  • steveb

    Worked it out: In the Navbar, you need to have the drop down icon setting ticked. Without this, icons won't appear at all.

     

    Not sure if this is something lost in translation, something I'm not understanding or a bug?

    0
    Comment actions Permalink
  • Lucas Tsolakian

    Out of curiosity, why are you using a Button inside a Scroll stack, since the Button has already the scroll integration? It works both ways, just that only the Button would save you another stack-sandwich in Edit mode :)

    0
    Comment actions Permalink
  • steveb

    Why? Offset.

    What about the drop-down icons needing to be ticked for icons to appear: Bug or meant to be that way (which is a little odd).

     

    0
    Comment actions Permalink
  • steveb

    More icon issues :-(

     

    Again, not sure if I'm doing something wrong, but Iconbar appears to be broken. I made a video for you...

     

    https://youtu.be/dhptUYZ9ioI

    0
    Comment actions Permalink
  • Lucas Tsolakian

    Yep there was a bug in Iconnav, just fixed and will release an updater asap. Will also add an advanced tab to it. Part from that the Flex stack will work ok only with inline stacks, Iconnav is not inline so I guess just the centering will work.

    0
    Comment actions Permalink
  • steveb

    Good stuff. Thanks.

    As I'm building out this project (which may or may not get released as a project for UIkitRW, I'm finding some other weird behaviours. Might be bugs, might be me getting things wrong. Are you happy for to continue to post here, or rather use email?

    One that I've recently found is this...

     

    Go here: http://ci-clientservices.com/clientdev/uikit/

     

    Reduce the screen size until this bit...

     

    Looks like this...

     

    If you load the page, you'll notice that the icon which now sits below the text appears to adopt the Scrollspy effect of the header, but it's not in a Scrollspy stack or have the same ID. As you can see in the image...

    Bug?

    0
    Comment actions Permalink
  • steveb

    The other thing that is doing my head in right now is the grid with the images, no matter what I do I can not get that container to center align. I've added flex classes everywhere, even created my own class adding the !important bit, nothing works.

     

    Ideas?

    0
    Comment actions Permalink
  • Lucas Tsolakian

    In the screenshot with the Edit mode I see the Icon is inside the Visibility and all inside the Scrollspy.

    Regarding the Container and images, I would't use the Container inside a Flex: usually the Container is the outmost element, everything else is inside it. 

    As for the alignment:

    1. drop a Container
    2. drop a Grid inside the Container
    3. set the Grid to 3 Width's everywhere (maybe not in Base option)
    4. drop Image stacks into each Width and your images into each Image stack
    5. voila
    0
    Comment actions Permalink
  • steveb

    "In the screenshot with the Edit mode I see the Icon is inside the Visibility and all inside the Scrollspy."

     

    D'oh! Can't believe I did spot that! Thanks.

    I don't need to use the visibility stacks now anyway, last night I learnt about using classes to set the order of width stacks.

     

    The centre aligned images are proving a little harder to sort, as I have quite a lot of stacks involved; Overlay, Transitions, etc. I'll maybe make a small project of this problem, zip it, and send it over?

     

    0
    Comment actions Permalink
  • steveb

    And for today's question...

    I want to set a max width to several elements, for instance, 400px. I don't think there is a simple stack to do this.  So I've been using the Utility stack and applying a custom class, mw400, to it. Then defining the mw400 class is the CSS inspector.

     

    Is there a built-in stack for setting the width that doesn't carry any other bulk? If not, is the Utility stack the best option in this case? I was thinking I could use the Margin stack, but that will apply margin, which I don't want. So my guess was the next lightweight weight stack is Utility?

    0
    Comment actions Permalink

Please sign in to leave a comment.

Powered by Zendesk