dealing with a problem with the bootstrap navigation bar concept

I’ve been struggling to align the menu and company name in a single row. Initially, I tried setting the company name followed by some spaces before adding the menu items, but it didn't work out as expected. I've been spending the last couple of hours attempting to troubleshoot with Bootstrap grid system.

_CustomLayout.cshtml

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    @Styles.Render("~/template/css")
    <title>Abc - Free Responsive Template using Bootstrap 4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .companyname {
            font-size: 22px;
            font-family: "Lato-Black";
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <a class="companyname">asasdasdasd Technology</a>
            </div>
            <div class="row">
                <div class="col-md-2">
                    @Html.ActionLink("Services", "Index", "Home")
                </div>
                <div class="col-md-2">
                    @Html.ActionLink("AboutUs", "Index", "Home")
                </div>
                <div class="col-md-4">
                    @Html.ActionLink("Blog", "Index", "Home")
                </div>
                <div class="col-md-2">
                    @Html.ActionLink("Hire Developers", "Index", "Home")
                </div>
                <div class="col-md-2">
                    @Html.ActionLink("Career", "Index", "Home")
                </div>
                <div class="col-md-2">
                    @Html.ActionLink("Get a Quote", "Index", "Home")
                </div>
            </div>
        </div>
    </div>

    @RenderBody()

https://i.sstatic.net/94DVs.png

I am aiming to position the company name after certain spaces and then have the menu items all in one row seamlessly.

Answer №1

I believe the solution you are looking for involves splitting a row into two parts.

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <a class="companyname">asasdasdasd Technology</a>
            </div>
            <div class="col-md-8">
                <div class="col-md-2">
                    @Html.ActionLink("Services", "Index", "Home")
                </div>
                <div class="col-md-2">
                    @Html.ActionLink("AboutUs", "Index", "Home")
                </div>
                <div class="col-md-1">
                    @Html.ActionLink("Blog", "Index", "Home")
                </div>
                <div class="col-md-3">
                    @Html.ActionLink("Hire Developers", "Index", "Home")
                </div>
                <div class="col-md-2">
                    @Html.ActionLink("Career", "Index", "Home")
                </div>
                <div class="col-md-2">
                    @Html.ActionLink("Get a Quote", "Index", "Home")
                </div>
           </div>
         </div>
    </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

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

"Troubleshooting: Difficulty with hover function in jqgrid not functioning on colored rows

My JQGrid setup includes the following: <table id="grid"></table> var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; $("#grid").jqGrid({ datatype: "local", height: 250, colNa ...

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

Can Selenium be used to validate resizing capabilities?

Looking to automate a test case focused on resizing a div element while ensuring that all content in the div remains unchanged, except for its size. Can Selenium help with this task? ...

Maintaining a one-line CSS menu layout, the middle element is designed with two inner elements that seamlessly stack without disturbing the appearance of the menu items

I'm facing a challenge with aligning the two elements in the "inline" class - I need them stacked so that the element containing "SECURITIES" is under "A.M.S". The issue arises when I try to add a line break after the A.M.S element, which also affects ...

Tips for setting one image as the background for an entire page

Take a look at the web template image linked below: URL - https://ibb.co/cD3iH8 I want to utilize the abstract design image above as the background for an entire page. Please provide guidance on the most effective way to accomplish this task. ...

How can I personalize the preview feature in a Bootstrap rich text editor?

Currently, I am utilizing Bootstrap's rich text editor by this method $('#editor').wysiwyg();. Utilizing AJAX, I am passing the HTML content created by .wysiwyg to save it in the database. Later on, I plan to retrieve the saved HTML data to ...

The merging of several XSL files

Hey there, I have two separate xsl files and an xml file. Is there a way to merge these xsl files into one transform type to create a single HTML output? The first xsl file is called index.html: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCT ...

By default, the select option in AngularJS will have a value of either an object or null

This block of code is located in the js file: $scope.ListOption = []; $scope.ListOption.push({ Value: "0", Name: Car }); $scope.ListOption.push({ Value: "1", Name: House }); Below is the corresponding HTML code: <select class="form-control" id="Categ ...

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

How can one execute a function within an HTML attribute value using Angular?

I am currently attempting to use the weatherToFontAwesomeIcon(weatherDescription: string) function directly within the HTML file for this component. My goal is to showcase a specific FontAwesome icon based on the weather response from the API. import { Cur ...

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

Using both PHP $_POST and $_GET in a form submission for enhanced functionality

My preferred programming language is PHP. I am currently working on a form and once it is submitted, I want it to redirect to a specific URL with a $_POST variable attached at the end (formatted as a $_GET), for example: http://example.com/page.php?my_ke ...

Navigating through a multistep form in AngularJS using UI Router and arrow keys for seamless movement

Is there a way to navigate to the next or previous form step using arrow keys in AngularJS UI Router? The code provided below is currently allowing navigation with previous and next buttons. .config(function($stateProvider, $urlRouterProvider) { $stat ...

Remove the initial DIV element from the HTML code

I have created a unique chat interface by combining JScript, php, and jquery. The chat messages are saved in an HTML document that gets displayed in the text area. Each user input message is contained within its individual div tag: <div>Message</ ...

What is the best way to transform URL images on a webpage into media library images in WordPress?

Having trouble converting HTML Static Sites to WordPress because images are hosted through HTML SRC Code. After conversion, no one can see the images in visual format on pages during editing. Is there a way to convert all image links inside pages to media ...

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

Guide to creating a dynamic amount of slides in a React carousel for optimal responsiveness

Looking for a solution to adjust the number of elements displayed in my React Carousel based on available size? I have a React Carousel that currently shows 3 elements at one time. Here is the code snippet: const RCarousel = ({items}) => { const numIt ...

When running the function `.find('li')` on a `bs4.element.Tag` object, it returns None despite the presence of the <li> tag within the soup

As I work on parsing the content of a URL using BeautifulSoup after making a request with `requests.get()` (not displayed in the code), I am using the parser ""html.parser"". Below is a snippet from a larger script: print(f"subheading : {sub ...