Styling a header using CSS

I successfully coded a header and navigation bar, but I am struggling with setting up elements like "Contact me" properly.

My goal is to separate them, add icons, and align the text to the right.

I am using Bootstrap 4, but nothing seems to be working, not even in the CSS.

<div class="navbar navbar-top" id="navbar-toolbar">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
        <a class="nav-link" href="#">Contact</a>
        <a class="nav-link" href="#">Help</a>
      </li>
    </ul>
  </div>
</div>

Navbar

  • Home (current)
  • Login
  • Register
  • Contact us
htmlcssbootstrap-4

Answer №1

For those just starting out with HTML and CSS, I recommend checking out resources like w3schools.com. It's important to understand the basics of HTML before diving into CSS, especially when it comes to properly wrapping your HTML elements such as opening and closing a <div> tag. This foundation is key when using attributes like id="", class="", name="", type="", and more in your CSS styling.

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

Update the session's data

Situation : I am working on a basic php form for calculations and pricing. I have set up the add, edit, and delete functions using a switch statement. Within my session, data is stored using $_POST. Issue with Edit Function : if (isset($_POST[&apo ...

phphtml

Issues with jQuery Slider not functioning properly within asp.net webform

I have implemented an Awkward slider to display images for my article. I made some CSS modifications to change the design and it worked perfectly fine when used on an HTML page. However, when I tried using it with an ASP.NET web form, it failed to work fo ...

jqueryasp.nethtmlcssjquery-slider

Experience the Firefox nightmare with a fixed background-attachment!

I've been struggling with a puzzling issue all day, and I'm hoping that someone with more expertise can help me solve it. As I work on updating the design of my website, I've encountered what seems to be a bug specific to Firefox. I've ...

htmlcssfirefox

Utilize Bootstrap to align two images in the same row and adjust their sizes accordingly

I am looking to display 2 images side by side on a single row, with the ability for them to resize accordingly when adjusting the page size without shifting to another row. Currently, as I decrease the page size, the second image (the black block in the d ...

htmlcsstwitter-bootstrap

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare

Issues with Bootstrap nav-tabs functionality have been reported in the 4.6 version specifically within an asp webform environment

I am currently working with Bootstrap 4.6 and attempting to utilize the nav function to create navigation tabs. However, I am encountering an issue where clicking on another tab does not trigger the expected behavior. The code snippet in question is as fol ...

jqueryasp.netbootstrap-4

Display a block by using the focus() method

My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...

javascripthtmlcss

What could be causing the jQuery news ticker to malfunction on my site?

I recently made some changes to my main page by embedding HTML and adding the following code/script: <ul class="newsticker"> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit ...

javascriptphpjqueryhtml

Adjust the background color of the body content to reflect changing content

How can I change the background color to #97EFFC when a menu item is selected? I want the body content background to be transparent until a menu item is displayed. Site.css /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { ...

css

The Mui Switch track color fails to change when checked

I'm looking to customize the colors of the track for both checked and unchecked states. Currently, the track color is working for the unchecked state but defaults for the checked state: Checked State: https://i.stack.imgur.com/eGV4a.png Unchecked S ...

cssreactjsmaterial-ui

When the jquery.show() function is invoked, scrollbars are displayed on the screen

I am encountering an issue with a flydown menu that includes a scrollable div. The div is about 400 pixels in height, causing scrollbars to appear in the drop down menu. When I hover over it, I trigger the show method as follows: $("#flydown").show(); Al ...

jqueryhtmlcss

Gone Without a Trace: Where Did the WP Admin

I am brand new to creating WordPress themes and I have just started working on my very first one. I have managed to get some content up and running, and the home page is functioning properly. However, when I log into WordPress and view the site, I noticed ...

phphtmlwordpress

"Utilizing custom data tags for woocommerce to display the product selling price with wc_rbp

When developing a website on WooCommerce, I encountered the need to create 6 different price lists with fixed prices for each product, while also being able to apply a global discount percentage for the price list assigned to each customer. To handle the ...

phphtmlwoocommercehook-woocommerce

Navbar collapse not functioning properly on HTML, CSS, and JavaScript

I have developed a CSS code snippet: .nav{ right: 0px; left: 0px; margin-top: 0px; margin-bottom:20px; height: 35px; text-align: center; background-color: red; z-index: 1; } .sticky { background: #000; text-align: center; ...

javascriptjqueryhtmlcsstwitter-bootstrap

jQuery preventing form submission after returning false

There's a small issue that I need help with. After submitting the form and receiving a false response, it prevents resubmission. For example, if a user forgets to input their name, they will see an error message asking them to do so. However, the u ...

phpjqueryhtmlajax

What is the best way to showcase a Table and an Image side by side in HTML using inline

Can someone help me figure out how to align my image and table on the same level? I've been struggling to get "inline-block" to work. :( <p id="play"> hey </p> <div id="menu"> <table> <tr> <td>Models</td& ...

htmlcsslayout

What is the best way to show a left and right arrow on a mobile website page?

I'm experiencing a strange issue with my webpage, specifically a post in Wordpress. When I try to insert the left right arrow character (U+2194) either by copying from a character map or using the html code, I end up with an icon instead of the actual ...

htmlmobile-safarimobile-chrome

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

javascriptcssreactjsvisual-studio-codestyled-components

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far. HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="tex ...

javascriptjqueryhtmlcssnavigation

Having trouble making the JavaScript mouseenter function work properly?

Hi there, I'm having trouble with this code and I can't figure out why it's not working. $('#thumbs > li').mouseenter(function() { $(this).find("div").fadeIn(); }).mouseleave(function(){ $(this).find("div").fadeOut(); ...

javascriptcss