Alignment and spacing that is responsive and inline for unordered lists

Struggling with creating a mobile-responsive navbar, specifically with getting the link containers to resize correctly and centering the text vertically. Attempts with padding and margins haven't yielded results. Bootstrap is being used.

In need of answers for the following:

  1. How to vertically center text within its container?
  2. How to adjust link container width to fit text width?
  3. How to maintain equal spacing between containers to fill screen width?

HTML

<div class="container" id="nav-container-mobile">
                <ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
                        <a class="nav-link" href="#Profile">
                            <div class="nav-link-container-mobile">Profile</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
                        <a class="nav-link" href="#Experience">
                                <div class="nav-link-container-mobile">Experience</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
                        <a class="nav-link" href="#Skills">
                                <div class="nav-link-container-mobile">Skills</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
                        <a class="nav-link" href="#project">
                            <div class="nav-link-container-mobile">Projects</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
                        <a class="nav-link" href="#Contact">
                            <div class="nav-link-container-mobile">Contact</div>
                        </a>
                    </li>
                </ul>
            </div>

CSS

#nav-container-mobile {
            position: absolute;
            width: 100%;
            height: 70px;
            padding: 0;
            background: #292929;
            z-index: 5;
        }
        #nav-list-mobile {
            width: 100%;
            height: 100%;
            margin: 0;
            vertical-align: middle;
        }
        .nav-link-horizontal {
            height: 100%;
            width: 15vw;
            min-width: 50px;
        }
        .nav-link-container-mobile {
            padding: auto;
            height: 100%;
            overflow-wrap: break-word;
        }

        .nav-link { 
            color: #aeaeae; 
        }

Appreciate any guidance or assistance.

JSFiddle

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Answer №1

To make things easier, consider utilizing the Bootstrap 4 Nav Fill or Justify feature, and then customize the background color and other styles according to your requirements.

Visit this link for a practical example.

<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
    <div class="container-fluid">
        <ul class="navbar-nav nav-fill w-100">
            <li class="nav-item">
                <a class="nav-link" href="#">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="">Experience</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Skills</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</div>

#nav-container-mobile {
  width: 100%;
  height: 70px;
  padding: 0;
  background: #292929;
  z-index: 5;
}

.nav-link { 
  color: #aeaeae; 
}

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

Tips for incorporating images into AngularJS applications

Just starting out with angular js. I've run into an issue. I'm working with a json for my data and I'm unsure about how to incorporate images into my code <div ng-controller="myCtrl" class="container"> <div class="col-md-8"&g ...

javascriptjqueryhtmlangularjs

Adding a combination of HTML and Javascript to an element can result in unexpected behavior

http://jsfiddle.net/PeKdr/ Encountering an issue when having a JavaScript variable that contains both HTML and JavaScript, resulting in unexpected behavior in the output window. Neither of the buttons - one triggering the function appendTheString() or the ...

javascriptjqueryhtmlappend

Pros and Cons of Using HTML5 Mode versus Hash Mode in AngularJS

When using AngularJS 1.3, it is necessary to include the <base> tag in HTML5 mode. This led me to consider the pros and cons of HTML5 mode versus Hash mode. In Hash mode, the major drawback is that URLs can appear unattractive and may not be easy fo ...

javascripthtmlangularjs

Obtain HTML tags from RSS CDATA section

Is there a way to extract HTML tags from a CDATA tag in an RSS feed? I have utilized a basic jQuery function to retrieve the JSON object from the RSS, below is my code: $.get("someURL", function(data) { console.log('InGet'); ...

jqueryhtmljsonxml-parsingrss

Chrome isn't displaying the text color of the link

I'm having an issue with a link that is styled like a button. It looks fine in Internet Explorer and Firefox, but not on Chrome. For example: The problem lies with the teal button in the center of the page that reads "follow issue." I intended for ...

htmlcss

Tips for dividing HTML code on a page into individual nodes

I am looking to extract the HTML content from a website and then parse it into nodes. I attempted the following code: function load() { $(document).ready(function () { $.get("https://example.com/index.html", function (data) { const loadpage ...

javascripthtmlnodes

Including a .css file in ejs

I'm currently developing an application using Node.js (express) with EJS, and I'm facing an issue while including a .css file in it. When I tried the same setup as a standalone HTML-CSS project, it worked perfectly fine. How can I include the CSS ...

cssnode.jsexpressejs

Incorporate Data-table functionality into an Ionic 3 application

After building a website with Ionic 3, I am interested in incorporating a data table similar to the one showcased here. What steps should I take to integrate this library into my website? Are there any particular considerations for the Ionic/Angular env ...

angularionic2ionic3angular-ui-bootstrapbootstrap-4

Safari and Internet Explorer 9 prioritizing min-height over height in rendering

For testing a website, I am using Safari 5.0.5 and IE9 on Windows. Within the CSS file, the following code is present: #contentarea { background-image:url('../images/img.jpg'); background-repeat: no-repeat; background-position: right to ...

jqueryhtmlcss

Best Way to Enable Push Notifications on Phonegap for iPhone - Top Suggestion

Looking for advice on the most cost-effective way to add push notifications to an HTML5 Phonegap app. I'm a front-end developer with limited xcode knowledge, so I'm considering using a service like Urban Airship. Any recommendations or tips on im ...

jqueryioshtmlcordovapush-notification

What steps can I take to stop search engines from crawling and indexing one specific page on my website?

I'm looking for a way to prevent search engines from indexing my imprint page. Is there a method to achieve this? ...

htmlseo

Launching a modal by passing data in an MVC environment

I am struggling with a task where I have a list of objects, and upon clicking on any of them, I want a modal to open displaying the data of the clicked object. Despite thinking it would be simple, I just can't seem to get it to work. My goal is to pas ...

javascripthtmlasp.net-coremodel-view-controllerrazor

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...

javascripthtmlcss

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

I'm currently working on a project inspired by Colt Steele's YelpCamp creation during his Udemy Web Dev Bootcamp. Everything was going smoothly until I tried to refactor some code towards the end of the course using YouTube tutorials. Now, whenev ...

javascripthtmlnode.jsexpress

Height and left properties do not work with CSS transitions

I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly. However, when I attempted to add a minimization feature by adding a ...

htmlcss

I am having trouble with the browser detection not accurately identifying the browser I am currently using

Currently, I am working on a JavaScript code that will simply display the name of the browser being used to view the web page. Despite me using Safari, none of the navigators seem to recognize it as the current browser. The information displayed in my brow ...

javascripthtml

Ways to tackle the issue of responsive layout

I'm facing an issue with this code snippet that I'm using for responsive layout. When I test it on my computer using programming tools to view how the code looks on a phone-sized screen, it appears perfect. However, when I deploy it, it doesn&apo ...

reactjsresponsive-design

Achieving a sleek line effect with a gradient border

Is there a way to make the gradient border transition between two colors look like a straight line? Additionally, is it possible to have the line start in the bottom left corner instead of the middle of the right side of the button? The current CSS code I ...

cssgradientlinear-gradients

Set the search input to occupy the full width of the container by utilizing Bootstrap's

I'm having trouble adjusting the width of my search input to 100% on screen resize (using @media (max-width: 1200px)). The issue: https://i.sstatic.net/EMr6W.jpg Here's how it should look (I can achieve this with a specific pixel width, but not ...

htmlcssformstwitter-bootstrap

Save property using the useState hook

I am working on implementing a sorting function in the child component, where the props are passed in from the parent through an axios call. Should I: Store the prop in the child component's useState? Pass the parent's setState function as a pro ...

javascripthtmlreactjs