Navigation widget edit..

Support Forums

Public support forums for active customers

Documentation

Read up on the basics of our styles in our documentation area

Bug Reports

Report those bugs so we can squash them!

Ticket Support

Need help in private? View or create a support ticket

Sort by date Sort by votes
Russ

Russ

Pixel Exit Staff
Not easily with CSS no.

I have a vertical navigation block I've been working on, would you want it to function like this where the sub-links would be the sub-forums?

nav.gif
 
Upvote 0 Downvote
Russ

Russ

Pixel Exit Staff
So I haven't done a ton of testing, and I'm a little strained for time but I hope this points you in the right version. This is a snippet of code from the new style I'm working on so don't mind the class names, but basically extra.less:

Code: 
.xbSidebar-nav-list
{
    .m-listPlain();
    li
    {
      
        &:first-of-type a { border-top-width: 0; }
    }
    li a
    {
        display: block;
        padding: 8px 15px;
        float: none;
        border-top: 1px solid @xf-borderColorFaint;
    }
    .xbVerticalNav-linkHolder
    {
        display: flex;
        .xbVerticalNav-link
        {
            flex-grow: 1;
        }
        .xbVerticalNav-toggle
        {
        flex-grow: 0;
        position: relative;
        text-decoration: inherit;
        &:before
        {
            content: '';
            position: absolute;
            left: 0;
            top: (@xf-paddingLarge - 4px);
            bottom: (@xf-paddingLarge - 4px);
            width: 0;
            border-left: 1px solid @xf-borderColorFaint;
        }

        &:after
        {
            .m-faBase();
            .m-faContent(@fa-var-chevron-down, 1em);
        }
        }
    }
    .xbVerticalNav-subList
    {
        .m-listPlain();
        .m-transitionFadeDown();
    }
}

Then add a HTML WIDGET, make sure advanced mode is checked and place the html:

Code: 
<div class="block xbSidebar-nav">
    <div class="block-container">
        <h3 class="block-minorHeader">
            Custom vertical nav
        </h3>
        <div class="block-blody">
            <ul class="xbSidebar-nav-list">
               <li>
                  <div class="xbVerticalNav-linkHolder ">
                    <a href="basiclink" class="xbVerticalNav-link " data-xf-key="1" data-nav-id="home">Basic Link</a>
                  </div>
               </li>
               <li>
                  <div class="xbVerticalNav-linkHolder is-selected" data-has-children="true">
                    <a href="forumlink#1" class="xbVerticalNav-link p-navEl-link--splitMenu " data-nav-id="forums">Forums</a>
                    <a data-xf-click="toggle" data-target="< :up :next" class="xbVerticalNav-toggle" role="button" tabindex="0" aria-label="Toggle expanded" aria-expanded="false" aria-haspopup="true"></a>
                  </div>
                  <div class="xbVerticalNav-subList">
                    <!--<h4 class="menu-header">Forums</h4>-->
                    <a href="subforum1link" class="menu-linkRow">Sub-forum #1</a>
                    <a href="subforum2link" class="menu-linkRow">Sub-forum #2</a>
                    <a href="subforum3link" class="menu-linkRow">Sub-forum #3</a>
                  </div>
               </li>
            </ul>
        </div>
    </div>
</div>

It's laid out somewhat neat...
 
Upvote 0 Downvote
cannabis ape

cannabis ape

Customer
Ok I noticed something.

I wanted to see how it looks if I place the sidebar on the left side but then all widgets end up about the forum section in full with.

If I disable the widget the sidebar looks normal on the left.
 
Upvote 0 Downvote
Russ

Russ

Pixel Exit Staff
cannabis ape said:
Ok I noticed something.

I wanted to see how it looks if I place the sidebar on the left side but then all widgets end up about the forum section in full with.

If I disable the widget the sidebar looks normal on the left.
Click to expand...

I mentioned to tick "Advanced mode" on the widget :D, that would remove the double border + title.

You need to remove the bottom closing </div> though since you removed the first opening div.
 
Upvote 0 Downvote
cannabis ape

cannabis ape

Customer
I've seen a similar widget like this on 1x but that one remembers which tab you got opened or closed, you know how that is done by any chance?

And last thing, I've had 6 different versions now haha but I would like the button and category title be one.

Closest version I got was this one but then I need the arrow back at the right again so the whole bar is clickable and turns into the dropdown
almost.png


Thank you!
 
Last edited:
Upvote 0 Downvote
cannabis ape

cannabis ape

Customer
Russ said:
Sorry, it remembering would require quite a bit of code would be custom work.

The option of it being one title + dropdown should be an easy fix.
Click to expand...
Ahh ok, well once I got some money to burn I will surely come hire you :D

The second thing I also thought so but I already have tried several things and ended up with 6 different version and none achieved what I wanted, Came close with that one screenshot but yeah, I know you can fix that in seconds, so if you can tell me that one I'll be on my way again.
 
Upvote 0 Downvote
You must log in or register to reply here.

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

View our stylesBrowse all our XenForo styles
DocumentationEssential information for our styles