Building a custom navigation bar using Bootstrap

I have a vision for a navigation bar. I envision it appearing in one seamless line with the website header on larger screens, but positioned below the header on mobile devices.

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

Despite my efforts, I haven't been able to achieve this design. My goal is to use Bootstrap to implement it.

Edit

Although I managed to create a basic navbar, I'm unsure how to proceed with my desired concept!

Edit 2

After some experimentation, I discovered that by using

<nav class="flex-column-lg">

I could potentially achieve the desired effect, but I'm still lacking direction.

htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

You can achieve the desired result with this code snippet.

<div class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-light bg-light row">
    <div class="col-sm col-md-2">
      <a class="navbar-brand" href="#">MyWebsite</a>
    </div>
    <div class="col-sm col-md-10 navbar-nav d-inline-flex flex-row justify-content-around" >
      <a class="nav-item nav-link" href="#">img-link</a>
      <a class="nav-item nav-link" href="#">img-link</a>
      <a class="nav-item nav-link" href="#">img-link</a>
    </div>
  </nav>
</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

If the text width of a label exceeds the total width of its container, intelligently display a sub-string based on pixel calculations

I am looking to shorten the text inside a label if its width exceeds the total width of its container. Instead of displaying the full text, I want to display a sub-string of it. if (SensorType.Text.Length >= 25) { SensorType.Text = SensorType.Text ...

c#htmlcss

What causes the navbar-brand to be hidden on Chrome mobile browsers?

I recently completed building my website at emdashr.com and have been adjusting the mobile views. However, I'm facing an issue where the navbar-brand disappears when viewing the site on mobile Chrome or desktop Chrome with a small viewport. Interestin ...

htmlcsstwitter-bootstrap

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

htmlcss

What are the steps to properly create an ordered list?

.book-summary ol { counter-reset: item ; } .book-summary ol li { margin-left:10px; margin-top:5px; display:block; } .book-summary ol li:before { content: counters(item, ".") " "; counter-increment: item; } <div class="book-summary"> ...

htmlcss

Changes in bottom position when scrolling in landscape mode on iOS Safari

I'm currently using ReactJS and have implemented a mobile menu bar with CSS properties position: fixed and bottom: 0. The menu bar stays locked at the bottom of the page in both portrait and landscape orientations on all browsers except for Safari. I ...

cssreactjsscrollcss-positionmobile-safari

Adjustments to the positioning of masonry columns

Hello everyone, I'm in need of some assistance with editing this code. My goal is to make the effect clickable rather than activated by hovering. You can view the current code snippet here. Here is the existing code: $container.find('.shifty-i ...

jquerycss

The jQuery slider comes to a gradual halt

I can't figure out why my jQuery slider doesn't stop right away after a mouseover event. There seems to be a delay that I can't resolve on my own. Can someone lend a hand with this problem? Here is the code I'm working with: https://js ...

jquerycssslider

I'm not entirely sure how JQuery processes the .each() function and the (this) keyword

I'm still learning JQuery and trying to figure it out. Can you help me understand what's going wrong with my code below? I have multiple content blocks with classes .acc-0, acc-1, and so on. I want to show and hide the .plans-breakdown when the ...

jqueryhtmlcss

Transform the radio selection into physical buttons with the Ruby on Rails Simple Form Gem

I've been struggling to achieve the desired layout when using the automatic wrappers generated by the Simple Form gem. I am working with Ruby on Rails and the Simple Form Gem, trying to create radio buttons with a specific design: https://i.sstatic.n ...

htmlruby-on-railsrubysimple-form

How can I modify certain attributes within an array of objects?

https://i.sstatic.net/TKkcV.jpgI need help with updating properties within an object array. Below is my code for reference. I have an object array consisting of two arrays, where the first one contains attribute "first" and the second one contains "last". ...

javascriptcssarraysreactjsobject

Tips for dynamically filling HTML content with Ajax calls

I'm currently in the process of creating a website for my semester project, and I need to dynamically populate HTML content from an AJAX response. The data I'm receiving is related to posts from a database, but I specifically need to display 5 jo ...

jqueryhtmlajax

Reactjs: When components are reused, conflicts may arise in UI changes

I'm currently working on creating a sample chat room application using reactjs and redux for educational purposes. In this scenario, there will be 3 users and the Message_01 component will be reused 3 times. Below is the code snippet: const Main = Re ...

javascripthtmlcssreactjsredux

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

javascriptjqueryhtmlcss

carousel/slider must be accessible

I have been searching for hours and still cannot find the perfect carousel/slider that I need. The one at this link is close to what I want, but it becomes inaccessible when JavaScript is disabled in the browser. I am looking for a jquery infinite carous ...

jquerycssjquery-uixhtml

Creating a personalized CSS class for TYPO3 menu links

I am currently in the process of creating a brand new website using TYPO3 6.2 and incorporating the Bootstrap Package. My goal is to be able to assign custom CSS classes to menu links directly from the backend, and then display these CSS classes within my ...

csstypo3typoscriptfluidextbase

What is the best way to adjust the value within a span element using plus and minus buttons located near an input field?

Is there a way to implement input addition using + and - buttons, even though it has been working without buttons so far? How can I achieve this functionality with the help of javascript or jquery? // To calculate the sum of three input values in a spa ...

javascripthtmljquery

In what way can a sub div be prevented from taking into account the height of its sibling?

I'm pretty confident that the answer to this question is going to involve using a clear:both property. However, I'm struggling with where exactly to place it and how to fully grasp its functionality. Within my nested div structure, I have a part ...

htmlcssheight

Laying Out Content with Bootstrap4 Grid System and Nesting Rows

design Is it possible to utilize Bootstrap 4's grid system to replicate the layout shown in this image? Can rows be nested within a main row? I've been struggling to achieve this. ...

htmlbootstrap-4

Click on the link to trigger the function that retrieves the value from the element with the ID "email"

I am completely new to HTML and JavaScript and currently building a website using Wix.com. The website will only consist of a text box and a button. While Wix.com is a user-friendly site builder, it lacks full HTML editing capabilities. This means I have ...

javascriptjqueryhtmlvelo

Determining if an object is visible on the screen (with no reliance on scrollbars)

Is there a way to optimize rendering on a website by only displaying elements on the screen and rendering others when they are in view? Similar to 3D culling, but for a website ^.^ [update] Is it not feasible to achieve this effect? [update2] I experim ...

jqueryhtmlcsslazy-loading