Creating uniform navigation links alignment using Bootstrap 3

Can someone help me with my navigation bar spacing issue?

I have a nav bar with a logo in the middle, but there is too much white space on either side. I want to evenly space out the navigation links like this

I currently achieved this by using padding-left and padding-right, but it feels like a hack. I tried googling for a solution but couldn't find one. Here is my current html with the padding I added.

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-chevron-down pull-right"></span>
            </button>
        </div>

        <a class="navbar-brand visible-lg visible-md hidden-sm hidden-xs"
           style="background-image: url('/Content/Images/logo.png'); background-repeat: no-repeat; height: 94px; width: 301px; left: calc(50% - 148px); "
           href='@Url.Action("Index", "Home")'></a>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <li id="lnkProducts">@Html.ActionLink("PRODUCTS", "Products", "Products")</li>
                <li><a href="/flavour-lab" style="font-family: Foco-Regular; padding-left: 35%" class="paddingLeft">FLAVOUR LAB</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/our-story" style=" font-family: Foco-Regular;padding-right:45%">OUR STORY</a></li>
                <li id="lnkVisitUs"><a href="#" target="_blank" style=" font-family: Foco-Regular">VISIT US: <b>f</b></a></li>
                <li id="lnkContactUs" class="visible-xs-block">@Html.ActionLink("CONTACT US", "Contact", "Contact") </li>
            </ul>
        </div>
    </div>
</nav>

Thanks

** Update **

Here's the CSS for left and right nav bars as requested

   .navbar-left {
    float: left !important;
}

.navbar-right {
    float: right !important;

}

** Update **

This is how it looks on a mobile screen

htmlcsstwitter-bootstrap

Answer №1

To achieve the desired layout, it seems like you need to specify a width for both your .navbar-left and .navbar-right classes and then apply floats to the inner elements.

Here is an example:

<ul class="nav navbar-nav navbar-left" style="width:380px">
        <li style="float:left" id="lnkProducts">@Html.ActionLink("PRODUCTS", "Products", "Products")</li>
         <li><a href="/flavour-lab" style="font-family: Foco-Regular; float:right" class="paddingLeft">FLAVOUR LAB</a></li>
     </ul>

UPDATE -

If setting the width in pixels for your navbar is causing issues on mobile devices, you can utilize the calc function in CSS to determine the width. For instance, if the dimensions of your middle icon are 301px*91px, you could use the following calculation for the widths of your left and right navbars:

width: -webkit-calc(50% - 150px);

Answer №2

If you're looking for a clever solution that maintains responsiveness, using table-display might just be the answer.

While some may consider it a bit unconventional, this method keeps your layout organized and functional, especially when your logo's size is less than 20% of the container width.

Here's a snippet of the HTML code:

<nav class="navbar navbar-default">
    <div class="container">
        <div class="collapse navbar-collapse">
            <div class="nav navbar-nav">
                <div>link1</div>
                <div>link2</div>
                <div class="text-center">logo</div>
                <div class="r">link3</div>
                <div class="r">link4</div>
            </divv>
        </div>
    </div>
</nav>

And here's how you style it with CSS:

.navbar-nav { display: table; }
.navbar-nav > div { display: table-cell; width: 20%; }
.navbar-nav > div.r { text-align: right; }

However, keep in mind that you'll need to create a separate menu for fluid viewports and switch between them based on screen size.

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 typography components within material-ui are appearing side by side on the same row

I'm having an issue with my typography components appearing on the same line instead of two separate lines. I've tried various methods to fix it but nothing seems to work. <div class="center"> <Typography variant=&q ...

cssmaterial-ui

Tips for adjusting the size of an image to fit within the page layout alongside navigation bars

I am currently working on adjusting the size of my image to fit on the page without requiring a scroll. It appears that the jumbotron and navigation elements are causing the image to be pushed down. To address this issue, I thought about placing the image ...

htmlcssimagenavigation

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

cssinternet-explorercross-browserbootstrap-4

Tips for resolving errors caused by posting an HTML element and preventing it from executing

I am currently troubleshooting my website and have noticed that when I post HTML, CSS, and PHP code using the article post function, it runs as posted. How can I prevent this from affecting my website in the future? For example: Submitting something like ...

javascriptphpjquerycssdebugging

Leveraging keyboard input for authentication in Angular

Would it be possible to modify a button so that instead of just clicking on it, users could also enter a secret passphrase on the keyboard to navigate to the next page in Angular? For example, typing "nextpage" would take them to the next page. If you&apo ...

javascripthtmlangulartypescript

Creating responsive images using Bootstrap CSS framework

I have been focusing on optimizing the banner below the navigation menu on this website. My goal is to make it responsive so that the player in the banner remains visible even when scaling down to iPhone size portrait. You can find the code for this secti ...

htmlcsstwitter-bootstrapresponsive

Exploring elementary functionalities within PHP

I'm just starting out, so please excuse any confusion in how I phrase this. Currently, I'm diving into my online computer science course which is focused on functions. The task at hand is to create sentences that output three different variables ...

phphtmlfunction

Utilizing AngularJS to Implement Gradient Effects Using the ng-style Directive

Having trouble setting gradients using the angular js ng-style directive. I can successfully set normal colors using the code below: <span ng-style="{'background-color': slidercolor}">works</span> However, when trying to set a gradi ...

javascripthtmlcssangularjs

Preventing repetition of data and storing submitted form inputs in a cache

I am facing an issue with my code that checks for duplicate entries based on the USER ID in the database. When I submit the form and the USER ID already exists, it clears all other fields on the form, requiring me to re-enter all details again. This is fru ...

phphtmlmysql

Sequence of background colors not altering as intended

After clicking a button, I included the following jQuery code in a code snippet on my WordPress site: jQuery("#cf_course_planner tr").css("background-color", "#f66"); jQuery("#cf_course_planner tr:eq(0)").css(& ...

javascriptjquerycsswordpress

AngularJS selectChosen does not have built-in support for translation

<select chosen options="myOptions" ng-model="StatCode" data-placeholder="{{'PleaseSelect' | translate}}" ng-options="item[0] as item[1] + ' / ' + item[0] for item in myOptions" required>< ...

angularjshtml

Centered Tailwind CSS logo design

Here is my current fiddle: https://jsfiddle.net/w5c36epd/ Upon close inspection, you may notice that the logo is not properly centered. I have experiment with various flexbox options such as: <div class="flex-shrink-0 justify-center"> ...

csstailwind-css

Tips for integrating Bootstrap JavaScript into a React project

I am encountering an issue while trying to incorporate Bootstrap JavaScript into my web app. I have successfully included the CSS, but I am facing difficulties with Bootstrap JavaScript for components like modals and alerts. My package.json includes: "boo ...

javascripthtmlreactjsbootstrap-4

Tags for multilingual websites

I am in the process of creating a website that will be available in multiple languages. I vaguely remember hearing about a meta tag that can inform search engines about the URL of the same page in a different language. Currently, I am using the following ...

htmlmetadata

encountering issues while attempting to create personalized profile pages with dynamic content

I'm currently working on creating a dynamic profile page that can be accessed by everyone using the link www.example.com/user/$id. Currently, the profile pages are not public and cannot be viewed by other users. I attempted to add the following code ...

phphtml

Sending authorization codes to web pages

I have developed a user authentication system that generates an access token after successful login. The challenge I am facing is passing this token to different pages as a header parameter in order to grant access to those pages. module.exports.authen ...

htmlnode.js

Clicking on an iFrame button will open the results in a new tab

Within one of my tabs, there is an iFrame tag that displays results from an insurance agency when the 'Compare now' button is clicked. <iframe src="https://www.compulife.net/website/1295/quoter.html" width="750 pixels" id="test" name="test" h ...

javascripthtml

When utilizing selenium to scrape an e-commerce platform, my scraper is limited to retrieving only the initial page of HTML content

When attempting to scrape data from tmall.com with selenium, I am encountering an issue where the program switches to another page but continues to retrieve the html content of the initial page. Even though the correct target page is being displayed in the ...

pythonhtmlselenium-webdriverweb-scrapingselenium-chromedriver

React JS progress circle bar is a simple and effective way to visualize

Currently, I am in the process of developing a progress circle bar that will function as a timer alongside sliders. Each slide is intended to have its own corresponding progress bar. While I have managed to create the bars individually, I am facing challe ...

javascripthtmlcssreactjsslider

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? https://i.sstatic.net/euoNI.png I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The ...

javascriptjqueryhtmlcsstwitter-bootstrap