Tips for creating a vertical tabbed menu display

I've been struggling for hours to convert my horizontal tabbed menu into a vertical one, but without any success.

http://jsfiddle.net/u42vvvq2/

(Updated jsfiddle source code link: Fiddle)

 // JavaScript code here... 
/* CSS styles go here... */
<div class="o-main">
  <div class="o-container">
    <div class="o-section">
      <div id="tabs" class="c-tabs no-js">
        <div class="c-tabs-nav">
          <a href="#" class="c-tabs-nav__link is-active">
            <i class="fa fa-home"></i>
            <span>Home</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-book"></i>
            <span>Books</span>
          </a>
             <!-- More HTML content -->
         </div>
      </div>
    </div>
  </div>
</div>
htmlcssflexboxnavbar

Answer №1

When utilizing the flexbox, it is necessary to include flex-wrap: wrap and flex-basis: 100%

Thank you for your assistance, it has improved things but I am seeking a way to align the content vertically as well ;)

To have the tabs and content displayed side by side, encase the content in a wrapper and apply display:flex to the parent element. Additionally, assign flex: 0 0 10% to.c-tabs-nav (or any other suitable value) and within the .vertical class (newly created), set flex: 1.

(function() {

  'use strict';

  // JavaScript code here

})();

// Google Analytics script here


// CSS styling here


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="o-main">
  // HTML content here
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone help me troubleshoot this issue with my code so that my website can open in a blank page using about:blank?

I'm currently facing an issue while trying to make one of the pages on my website open with an about:blank URL upon loading. Despite embedding the code in my index.html file, it doesn't seem to be functioning properly. Here's the code I&apos ...

javascripthtml

The functionality of the dynamic text box is disrupted when a form element is added

I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...

javascriptjqueryhtmltwitter-bootstrap

The dual-column format is experiencing technical difficulties

Having some trouble creating a two column layout in an HTML page. I've posted my code on jsfiddle http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/ Struggling to set a top margin for the inner container, even though I've specified it in the CSS ...

cssxhtmlhtmlcss-float

Ajax is invoked only one time

The system is set up to display a follow button and an unfollow button. Clicking the follow button should make the unfollow button appear, and vice versa. Currently, when you click "follow", the database updates and the follow button disappears while the ...

javascriptjqueryhtmlajax

What triggers the activation of the inline formatting context in this particular scenario?

MDN provides insight about the img element in regard to styling with CSS, highlighting how images interact within an inline formatting context. The positioning of images when used in-line can be affected by vertical-align: baseline due to <img> not ...

css

Provide a response containing JSON data extracted from an HTML file

I am looking for a way to create a simple REST API using a hosting site that only allows hosting of HTML files along with JavaScript files. I want to be able to send POST/GET requests and receive JSON data in response. For instance, when making a GET requ ...

javascripthtml

Converting HTML and CSS to PDF in Java using iText

I've been working on converting HTML to PDF. Initially, I transformed my HTML code into XHTML using the resources provided in this link: After successfully displaying the generated XHTML code in a browser by creating an HTML file for testing purposes ...

javahtmlcsspdfitext

I have a simple inquiry regarding the customization of table designs

I struggle with html/css, so I could really use some assistance. Here's a fiddle of a table link to fiddle. The td rows are currently the same width, but I want to set specific widths for each column - 200px for the left column and 50px for the right ...

htmlcss

What is the reason that module.export cannot expose an array to a JavaScript file, while export is able to do so

I am new to node.js and trying to grasp the concept of module.export vs export. When I use export { arr } and import { arr } from '../js/export.js'; everything runs smoothly, allowing me to display the array on the browser using html. However, w ...

javascripthtmlnode.jsmodule.exports

Transforming the letters of a word on hover: A step-by-step guide

Imagine I have the word "IamGreat" hidden within a paragraph on my website, and I wish for it to transform into "Good4you" when hovered over. But here's the catch - instead of the entire word changing at once, I want each letter to switch individually ...

javascriptjqueryhtmlcss

Get ready for some Angular validation appearing on the screen

Using AngularJS, I have set up routes and validations on the HTML page. Here is a snippet of my HTML code: <form ng-controller="validateCtrl" name="loginForm" novalidate> <p>UserName:<br> <input type="text" name=" ...

htmlangularjsvalidation

Color variable in HTML

I am currently working on a project that involves an HTML form where the variables are extracted from JSON data. These variables can be categorized as “In Progress”, “Pending”, or “Completed”. My question is, is it possible to dynamically chan ...

jqueryhtmljson

What is the reason for the position of div1 not being directly in the top right corner when its position is set to div2's top and left offset plus div2's width?

function handler(ev) { var target = $(ev.target); if( target.is(".item") ) { var brt = $(target).offset().top; var let = $(target).offset().left + $(".test").width(); $('#DivToShow').css({'top':brt,'left':let, 'd ...

javascriptjqueryhtmloffset

"Troubleshooting vertical tab inconsistencies in Jquery: addressing unexpected gaps and alignment

After spending a considerable amount of time on this, I'm still struggling to make it work properly. The main issue is the gap between the tabs and the content area. I've tried adjusting the positioning, but it ends up affecting the overall layo ...

javascriptjqueryhtmlcss

What's causing my struggle to override the bootstrap nav-link class in next.js?

I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...

csstwitter-bootstrapnext.js

What is the best way to use CSS to center a div on a webpage?

I am trying to position the div.father in the center of the screen, and then center the div.son within the div.father. Here is a visual representation of what I want: https://i.sstatic.net/6gsHb.png Can anyone help me rewrite my CSS code to achieve this ...

htmlcss

Ways to center a div with position:relative vertically on the page

What is the best way to center a position relative div vertically within its parent element? For example: <div class="parent"> <div style="position:relative;" class="child"> </div> </div> Any suggestions on how to vertic ...

csspositioncenter

Utilize the data-toggle attribute to retrieve a unique variable name, which can then be integrated into a function for added

I'm in the process of replacing an iframe with an image, and I want to accomplish this with minimal code. The container div I'm working with has a data-toggle attribute: <div id="my-div" data-toggle="video2"> <div id="videocontaine ...

javascriptjqueryhtml

Uninterrupted jQuery AJAX calls

I have a scenario where I need to periodically update an image on my view using ajax every 10 seconds. Any suggestions on how I can achieve this? Appreciate the help. ...

phpjavascriptjqueryhtml

Tips for establishing a universal onkeydown listener for all frames within a webpage?

Working with a complex legacy multi-frame webpage that needs to be compatible with IE-11 and responsive to hotkey events has brought up some challenges. It appears I can't simply declare a JavaScript method in the parent page. Rather, it seems that e ...

javascripthtmlinternet-explorer-11frames