Switching from a horizontal orientation to a vertical layout for navigation

My current horizontal navigation bar needs to be transformed into a vertical left layout. Here is the HTML code:

<div ng-controller="PortalController">
    <header>
        <h1>E_Zuite</h1>
        <nav role='navigation'>
            <ul>
                <li><a class="link-1 entypo-home active" href="#home"></a></li>
                <li><a class="link-2 entypo-picture" href="#clients"></a></li>
                <li><a class="link-3 entypo-user" href="#about"></a></li>
                <li><a class="link-4 entypo-mail" href="#contact-us"></a></li>
            </ul>
        </nav>
    </header>
</div>

Below is the CSS code used for styling:

 header {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  background-color: #373948;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 30px;
}

header h1 {
  float: left;
  margin: 5px 0px;
  color: white;
  font-family: 'Meddon', cursive;
}

header nav ul {
  height: 70px;
  float: right;
}

header nav ul li {
  height: 70px;
  display: inline-block;
}

I require assistance with converting my navigation bar and icons to align vertically on the left side as specified above.

htmlcss

Answer №1

Try updating your css with the following changes:

header {
  width: 200px;
  height: 100%;
  box-sizing: border-box;
  background-color: #373948;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 0px 0px 0px 30px;
}

header h1 {
  float: left;
  margin-top: 5px;
  color: white;
  font-family: 'Meddon', cursive;
}

header nav ul {
  height: 70px;
  float: right;
}

header nav ul li {
  width: 200px;
  height: 70px;
  float: left;
  display: block;
}

I've adjusted the width of the header and set its height to 100%. Additionally, I updated the margin property for the h1 element and modified the width and float attributes for the li menu.

This should give you the desired outcome, but feel free to customize it further according to your preferences.

Answer №2

header h1{
  margin: auto;
 }
header nav ul {
  align-items: center;
 }
header nav ul li{
 display:flex;
 width:100%
}

Simply include these styles in your CSS stylesheet.

Answer №3

If you're looking to anchor your vertical navigation to the left side, the following code snippet will do the trick.


nav{
      position: fixed;
      top: 100px;
      left: 0px;    
    }

    header {
      width: 100%;
      height: 70px;
      box-sizing: border-box;
      background-color: #373948;
      position: fixed;
      top: 0px;
      left: 0px;
      padding: 0px 0px 0px 30px;
    }

    header h1 {
      float: left;
      margin: 5px 0px;
      color: white;
      font-family: 'Meddon', cursive;
    }

    header nav ul {
      height: 70px;
      width: 30px;
      margin: 0;
      padding: 0;
    }

    header nav ul li {
      display: inline-block;
      width: 30px;
    }

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

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

How can I programmatically define the earliest and latest selectable dates in a date picker within Angular 4?

I am currently working on a task to prevent users from selecting past dates on a date picker. I want to set the minimum date available on the date picker to the current date. Below is the code snippet I am using to achieve this: Component.html <input ...

htmlangular

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

There is an add button that continuously adds a div container containing two dropdowns. The selection in one dropdown affects the data in the other dropdown. When the add button is clicked, a second div with both dropdowns is added. However, changing the ...

javascripthtmlcssangular

What is the best way to dynamically update form fields in a database after making a selection in a <select> component?

Currently, I have a form that displays a list of stars (stellar objects) with a <select> control and two <inputs>. I am seeking guidance on how to populate the two inputs from the database when the user changes the selection in the <select&g ...

javascriptphphtmlajaxmysqli

Unable to choose an option from the panel

I am currently working on a menu and panel setup (you can view the demo here: http://jsfiddle.net/vals/j2LrQ/1/). The visibility of the panel depends on the selected item from the menu. However, I am facing an issue where the panel disappears when I move ...

jqueryhtmlcssweb

Tips for setting HTML content in a text field using SOAP API in Tuleap

We are using the Tracker SOAP API to create fresh tracker artifacts. While making changes to an artifact in Tuleap, there is an option to choose between plain text and html in a dropdown menu for a text field. Our goal is to input html-formatted text into ...

htmlsoaptrackertuleap

integrating live html content into dompdf with php

Hey there, I'm currently working on a script that dynamically loads HTML using the file_get_contents function and then generates and saves the PDF on the server. However, I'm running into a problem where my PHP file is throwing a 500 internal ser ...

phphtmlmysqldynamic-datadompdf

Assistance requested for jQuery photo display

I'm in the process of setting up a portfolio image gallery on my website, but I've hit a bit of a roadblock. When I select one of the icons, the initial image disappears as it should, but the subsequent image doesn't appear... Here's t ...

phpjquerymysqlhtmlportfolio

Guide to Including Captions and Spans in a Table

In the given HTML code, nested tables are used by the developer which cannot be changed. However, there is a requirement to replace the table class and add a caption and span only to the main table. <table class="two_column_layout" align="center"> & ...

javascriptjqueryhtmljquery-selectorsprepend

Ways to format a C# string outcome showcased in HTML (ASP.NET)

I'm facing an issue with formatting the output (string) retrieved from a C# database connected to ASP.NET. I want to style the row["Grens"] differently from row["Sanctie"], for instance. The result is displayed in a basic div: <div id="resultaat" ...

c#htmlcssasp.net

The hyperlink within the dropdown menu in HTML code is malfunctioning

I'm currently working on my personal website using HTML and CSS with textedit. I've successfully created functional links for the main navigation menu headings, but I'm encountering issues with the dropdown options. Whenever I try to click o ...

htmlcsshyperlinkdropdown

Burger menu animation activated by a single click anywhere on the page

After following a tutorial on creating an animated menu burger, I encountered a few bugs. The animation is working as intended, but it triggers no matter where I click on the page. Here is the code snippet: const toggleMenu = document.querySelector( ...

javascripthtmlcss

Troubleshooting the malfunctioning of the Bootstrap slide animation

I've been attempting to implement scroll animation on a div, but for some reason, it's not working as intended. I must have made a mistake somewhere, but I can't figure out where. Any help in resolving this issue would be greatly appreciated ...

javascriptjqueryhtmlcsstwitter-bootstrap

Conceal and unveil stationary navigation when scrolling back to the very top of the screen

My current setup includes a navigation that dynamically hides as the user scrolls down and reappears when scrolling up. Additionally, I have applied the class .fixed on #top-wrapper to alter the layout/styling of this specific div. However, I am facing dif ...

javascripthtmljquery

Arrange a div close to another div with the help of absolute positioning

My goal is to create a tooltip-like positioning for an element within the same container as another element. When clicked, this particular element will display a div containing a table. You can find the complete code here: http://jsbin.com/xihebol When s ...

javascripthtmlcss

Arranging Bootstrap buttons in a clean row

How can I add two nav buttons "register" and "sign in" to the top right of my navigation bar, and include a separate button "request a demo" below them without displacing the first two buttons? I am currently using a br tag to push the third button down ...

htmlcsstwitter-bootstrap

CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the y ...

htmlcss

Aligning HTML headers in a horizontal manner

Can anyone help me out here? I have a div containing 4 elements that are currently stacked on top of each other. I want them to be aligned horizontally instead. The div's ID is #ninesixty. Thank you in advance! HTML <header> <div id="ni ...

csshtmlweb

Issues with the styling of HTML code

Our website features a main menu with submenus that are intended to be displayed only when hovering over the main menu. However, upon loading the site, the submenu is already visible causing an issue. We need the submenu to appear only when the main menu i ...

javascripthtmlcss

Create a stylish border around an ion-card using a sleek black bar

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

htmlcssionic4