css - Attach vertical menu to segment using Semantic UI -


how possible attach vertical menu segment using semantic-ui css framework? when using markup presented in documentation there margin (resulting form grid padding) between content , menu. if not using grid borders don't fit.

    <div class="ui grid">     <div class="row">         <div class="sixteen wide column">             <!-- overlapping border -->             <div class="ui horizontal segments">                 <div class="ui vertical tabular menu">                     <a class="active item">bio</a>                     <a class="item">pics</a>                     <a class="item">companies</a>                     <a class="item">links</a>                 </div>                 <div class="ui segment">                     stretched grid column. segment match tab height                 </div>             </div>         </div>     </div>     <div class="row">         <!-- margin between elements -->         <div class="four wide column">             <div class="ui vertical fluid tabular menu">                 <a class="active item">bio</a>                 <a class="item">pics</a>                 <a class="item">companies</a>                 <a class="item">links</a>             </div>         </div>         <div class="twelve wide stretched column">             <div class="ui segment">                 stretched grid column. segment match tab height             </div>         </div>     </div>     <div class="row">         <!-- margin between elements -->         <div class="four wide column">             <div class="ui vertical fluid menu">                 <a class="active item">bio</a>                 <a class="item">pics</a>                 <a class="item">companies</a>                 <a class="item">links</a>             </div>         </div>         <div class="twelve wide stretched column">             <div class="ui segment">                 stretched grid column. segment match tab height             </div>         </div>     </div>     <div class="row">         <div class="sixteen wide column">             <!-- overlapping border -->             <div class="ui horizontal segments">                 <div class="ui vertical menu">                     <a class="active item">bio</a>                     <a class="item">pics</a>                     <a class="item">companies</a>                     <a class="item">links</a>                 </div>                 <div class="ui segment">                     stretched grid column. segment match tab height                 </div>             </div>         </div>     </div> </div> 

jsfiddle

i expect vertical menu attached segment (like when using horizontal menus). tabular menu

i think can make small overriding css class amend few things in default grid ui , menu classes make want. here code sample first grid ui example: http://codepen.io/nasir_t/pen/doggro


Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -