Tips for positioning icons on the navigation bar using Bootstrap: How to display the icon on the right side and at the top of the

I am trying to position the arrow icon on the right side of the navigation bar, currently it looks like this:

https://i.sstatic.net/35wef.png

But I want it to look like the screenshot below:

https://i.sstatic.net/lvvAM.png

<div id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <li class="sidebar-brand"><a href="#">Start Bootstrap </a>
    </li>
    <li><a href="#"><span style="float:right" class="glyphicon glyphicon-chevron-left"> </span></a> 
    </li>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a> 
    </li>
    <li><a href="#">Contact</a> 
    </li>
  </ul>
</div>

Please advise on how to achieve the exact layout shown in the screenshot.

htmlcsstwitter-bootstrap

Answer №1

Give this a shot.

.sidebar-nav li{
background: #000000; 
line-height: 40px; 
list-style: outside none none; 
position: relative;
border-bottom:1px solid #333;
}
.sidebar-nav li a { 
color: #ffffff; 
padding: 0 10px; 
text-decoration: none;
position:relative;
}
span.arrow { 
float: right;
display: inline-block;
background-color: #eee;
color: #000;
padding: 5px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin-top: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-sm-3 col-xs-6" id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
<li><a href="#"><span class="glyphicon glyphicon-chevron-left arrow"></span></a> </li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a> </li>
<li><a href="#">Contact</a> </li>
</ul>
</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

Issues with Bootstrap Input Group functionality

I am attempting to align multiple form elements in a row, however I am encountering some unusual behavior. My goal is to have the checkbox, label, number input, and select dropdown appear in the same line as shown in this image: https://i.sstatic.net/rARZ ...

htmlcssbootstrap-4

Modern gallery of adhesive art pieces

Lately, it's becoming more common to come across websites with galleries like the ones found here: (check out the gallery) I find these galleries quite appealing and I'm interested in incorporating something similar on my own website. However, ...

javascripthtmlcsswebgallery

How to Position Two Child Divs in the Center of a Parent Div

I have been searching extensively, but I can't seem to find a solution to my problem. Let me explain with a simple example. I have two child div elements within a parent div, and I want them to be centered horizontally inside the parent div. Here is t ...

htmlcss

The footer on my webpage seems to be completely incorrect, but I'm struggling to identify what is causing the conflict

I'm puzzled by the issue with the footer on my webpage, especially the strange line of black opacity that shouldn't be there. I'm unsure why this is occurring. You can view the problematic page here. I've also created a codepen with the ...

htmlcssfooter

What is the method for emphasizing links in the navigation bar with Bootstrap 3?

I am currently working on applying custom CSS styles to the Bootstrap navbar in order to have the link text underlined when hovered over, with a fade-in effect as well. To see what I have accomplished so far, you can view it here: https://jsfiddle.net/xfd ...

htmlcsstwitter-bootstrap

Express router is not functioning properly with the static CSS file

My current project involves using Express to create a login application, with EJS as the chosen template engine. The file structure of the application is as follows: package.json server.js routes index.js users.js views layouts.ejs login.ejs ...

cssnode.jsexpressejsexpress-router

Storing information when an object is indexed in a for loop, to be retrieved later when

My JavaScript code includes an AJAX call that takes user input from a form and uses it to search for a JSON object. The matching objects are then displayed in a datalist successfully. Everything is working well so far, but now I want to extract specific f ...

javascripthtmljsonajax

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues. I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap. My familiarity ...

cssbootstrap-5

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...

javascriptjqueryhtmlcssanimation

excess white space appears in the mobile version

I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...

javascripthtmlcsstwitter-bootstrapmaterialize

Generating a Simulation of a Computer Screen Embedded Within a Webpage

I have taken on the task of creating a website for a grant-funded documentary project. In this documentary, one of the characters is depicted as building a website about a specific topic. The idea is to display his computer, which is a hand-drawn graphic b ...

jqueryhtmlcsswordpress

The width:auto attribute for images in ie6 is not functioning as expected

I am facing a challenge with dynamically changing and resizing an image element to fit its container. My current approach involves: Resetting the image: // Ensuring the 'load' event is re-triggered img.src = ""; // Resetting dimensions img. ...

javascripthtmlcssinternet-explorerinternet-explorer-6

Time Zone in the domain of Tempus Dominus

I am looking to utilize the TimeZone feature in Bootstrap 4's Tempus Dominus (calendar) function. This feature relies on moment-timezone, for which I have already included the CDN. My goal is to set the timezone to EST (GMT-5), instead of it automati ...

twitter-bootstrapbootstrap-4momentjstempus-dominus-datetimepickermoment-timezone

Creating a wireframe sphere in 2D using HTML5 canvas

Currently seeking ways to create a 3D wire frame sphere on a 2D Canvas without being a math expert. Is there an easy method using lineto arc connections and mathematical drawing in Canvas? Any guidance would be greatly appreciated. My goal is something s ...

htmlcanvashtml5-canvas

Space between pixels at the bottom of a division

There's a puzzling issue here with a simple fix waiting to be uncovered. In the example below, a pixel gap has formed between the bottom of two images and the DIV elements (home-top or home-bottom). How can this bothersome space be eliminated? .con ...

htmlcss

Disabling the visibility of elements through a transparent sticky-top menu

I'm having an issue with my website design. I have a gradient background and a sticky-top menu on the site. The problem is that when I scroll down, the content appears through the menu, which is not ideal. I don't want to apply the same gradient ...

javascripthtmlcssnavbar

Utilizing webpack to extract CSS from SCSS files

I've been working on integrating webpack into my asp.net mvc core project. While I've successfully bundled js files, I'm facing an issue with extracting css from scss files. var path = require('path'); var extractTextPlugin = requ ...

javascriptcssnode.jsnpmwebpack

Create HTML code automatically from JSON data

Currently, I am in the process of developing a template system. The concept is that an ordinary user can create a JSON file which will then be used by the system to automatically generate HTML code. However, I am facing some challenges and feeling a bit lo ...

javascripthtmljsontemplates

using css styles in an angular component of a web application

I am currently developing an Angular 2 application with ASP.NET WebAPI 2 to retrieve data. Instead of using ASP.NET cshtml pages, I am utilizing HTML pages to display the content. Within my application project, I have two CSS files - Bootstrap.css and Site ...

htmlcssangular

Is the component experiencing issues with its style functionality?

I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...

cssangular