Issues with the navigation and logo design in bootstrap mode

1: How can I adjust the size of the logo and name in my Bootstrap navigation?

2: My navigation menu is not showing up correctly. Can anyone help me troubleshoot?

https://i.sstatic.net/0pXya.jpg

Navbar:

<nav class="navbar navbar-expand-lg py-4  fig-nav">
<div class="container">
<a href="#" class="navbar-brand">
  <!-- Logo Image -->
  <img src="./assets/logo.svg" width="50" height="50" alt="" class="d-inline-block 
  align-middle mr-3 img-responsive">
  <!-- Logo Text -->
  <span style="color:#ffffff" class="text-size text-decoration-none font-weight- 
bold">Name</span>
</a>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data- 
 target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
 expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active"><a href="about.vue" class="nav-link nav-link:hover ">About 
  </a></li>
    <li class="nav-item "><a href="products.vue" class="nav-link nav- 
    link:hover">Products</a></li>
    <li class="nav-item "><a href="information.vue" class="nav-link nav- 
    link:hover">Information</a></li>
    <li class="nav-item "><a href="jobs.vue" class="nav-link nav-link:hover">Jobs</a></li>
  </ul>
  </div>

  </div>
  </nav>
htmlcsstwitter-bootstrap

Answer №1

  1. You've made a few errors in your code, so please review my example closely.
  2. If you're using Bootstrap-5 and need to enable negative margins, you can do so by setting $enable-negative-margins: true in Sass. Refer to the documentation here: https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin. Alternatively, consider using Bootstrap-4 or implementing custom CSS styles.

Be sure to double-check my code snippet below for guidance:

 .navbar-nav{
        margin-left: auto;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c27202721322313667d637d637e3136273262">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

</head>
<body>
    <nav class="navbar navbar-dark bg-primary navbar-expand-lg py-4  fig-nav">
        <div class="container">
        
            <!-- Logo Image -->
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" width="50" height="50" alt="" class="d-inline-block 
            align-middle mr-3 img-responsive">
            <!-- Logo Text -->
            <a href="#" class="navbar-brand">Name</a>
            
            <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data- 
            target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
            expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div id="navbarSupportedContent" class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active"><a href="about.vue" class="nav-link nav-link:hover ">About </a></li>
                <li class="nav-item "><a href="products.vue" class="nav-link nav- 
                link:hover">Products</a></li>
                <li class="nav-item "><a href="information.vue" class="nav-link nav- 
                link:hover">Information</a></li>
                <li class="nav-item "><a href="jobs.vue" class="nav-link nav-link:hover">Jobs</a></li>
            </ul>
            </div>
        
          </div>
          </nav>
</body>
</html>

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

Get the nearest offspring of the guardian

I have a main 'container' div with multiple subsections. Each subsection contains 1 or 2 sub-subsections. Let's say I have a variable that holds one of the subsections, specifically the 4th subsection. This is the structure:container > s ...

javascriptjqueryhtml

apply styling to the placeholder with CSS

I have been attempting to customize the styling of the placeholder text. After setting the color to red within the input class, I did not see any changes. Even after conducting research and referring to this link Styling the placeholder in a TextField, I w ...

javascripthtmlreactjsmaterial-ui

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

htmlcssvue.js

Update the jQuery script tag with new content - rewrite everything

I am facing an issue with jquery. I need to change the link to src only when "document.write" is present. Below is my code: myscript.js document.write("TEST ABCD"); test.html <html> <body> <button id="example">click me</button&g ...

javascriptjqueryhtml

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...

htmlangularjsspringjsp

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

htmlcss

Conceal the Download Button Effectively

I operate a website for playing audio files and I am looking to prevent users from downloading the sounds using the download button in the HTML audio element. Here is what I came up with: <audio src="sound.mp3" controls controlsList="nodownload">< ...

html

active option in Opencart 2.1 is set to "selected"

I've implemented the AJAX module d_quickcheckout to speed up the checkout process on opencart 2.1 (not the default one). However, I'm encountering an issue with a field in the payment address section that is always pre-selected with the region/st ...

javascripthtmlajaxopencartopencart2.x

I need assistance with retrieving an image from a database using PHP

How can I display an image from the database on a new page using PHP? Whenever I click on the image, it always shows the same image on the new page. How can I make it so that the image displayed on the new page is the one I clicked on in the previous pag ...

phphtmlmysqlsql

Is it possible to trigger a script tag based on certain conditions using a JavaScript function?

I'm currently working with Angular and have a requirement to trigger a third party script from a function located within another script tag. Here's an example scenario: Within the index.html file let displayOnHomepage = () => { if (win ...

javascripthtmlangular

Which HTML tag should I choose to apply color to text in Twitter Bootstrap?

I'm looking to enhance the appearance of a specific word in my text. For example: This is my text, <span class="red">this</span> should be red. Would using the span tag be the appropriate method for achieving this effect? Or are there ot ...

htmlcsstwitter-bootstrap

Tips for creating PrimeNG tables with columns that automatically adjust in size

Is there a way to automatically adjust and resize the columns in my PrimeNG table? I'm looking for a method to make this happen. Can you help me achieve this? ...

htmlcssangularprimeng-datatable

Exploring color options in matplotlib for HTML designs

Is there a way to change color in a matplotlib plot using html in Python? I attempted plt.plot(x,y,marker=".",color="#e0e0e0") However, this resulted in data points displayed as ".", connected by lines of color #e0e0e0 which is not desired. I also experi ...

pythonhtmlmatplotlib

Adjusting the width of a div element horizontally in Angular 4 and

As someone new to Angular 4, I've been attempting to create a resizable div (horizontally) without success. My goal is to be able to click and drag a grabber to resize the text area horizontally. However, in the example provided in the link below, the ...

htmlcssangular

Implementing a stylish gradient background with HTML 5 progress bar tag

I am trying to customize an HTML5 progress bar tag in a unique way: The background of the bar should have a gradient with a fixed width of 100%, but I want the gradient to only be visible where the value of the bar is... progress[value]::-webkit-progres ...

csshtmlstylesprogress-barlinear-gradients

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

htmlcssrazor

Implementing Angular with HTML progress bar for interactive client-side features

Exploring the integration of HTML built-in progress bars with Angular: <label for="file">File progress:</label> <progress id="file" max="100" value="70">30%</progress> I am curious about how ...

htmlangularprogress-bar

Using JQuery with the latest version of Google Sites is a game-ch

My coding knowledge is very limited, especially beyond VBA. I've hit a roadblock and it seems like I'm overlooking something obvious. What I'm attempting to accomplish: I need this code to be integrated into a New Google Sites page (which h ...

javascriptjqueryhtmlcheckboxgoogle-sites

Is the order of elements in a CSS file important?

In my situation, I am dealing with a nested list and enclosing div that was created by Drupal's menu system, so I am unable to modify it. My goal is to replicate the menu from a hardcoded website (link removed). How can I include the sub-items (ul l ...

cssmenunested-lists

shifting the angular directives to alternate the bootstrap class of hyperlinks

I have a collection of hyperlinks displayed on my webpage. <a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >Explore First Link</a> <a href="#" class="list-group-item list-group-item-action" r ...

htmlangularclasshyperlinkbootstrap-4