Repairing the base navigation interface and correcting the hyperlink to redirect to a different webpage

Can anyone assist with aligning my bottom navigation bar and fixing a link issue on both navigation bars?

I've been struggling to center it. Do you think using padding could solve the problem? I've tried guessing the pixel count, but to no avail.

The spacing on my bottom navigation bar is incorrect, even after adjusting the font size. Currently, it displays like this: "HomeWho We AreWhat We Do...".

Additionally, one of my links seems to be broken. It's a link to another page I coded, and I believe there are no errors in the code, yet it remains unresponsive.

Here is a fiddle where you can view the issue: https://jsfiddle.net/captainpokey/66szogpm/

Below is the relevant code snippet:

html {
100%
}
...
</body>

Your help is greatly appreciated! Thank you in advance.

htmlcss

Answer №1

Here are the adjustments I've made.

Check out the updated code here

Snippet to center align your top navigation text:

#nav li {
    line-height: 40px;
    float: left;
    position: relative;
    width: 150px;
    list-style: none;
}

Code snippet for bottom navigation alignment:

#navbottom {
    padding-left: 100px;
    width: 1000px;
    color: #fff;
    font-size: 14px;
    font-family: "Lato";
    margin: 0 auto;
}

#navbottom ul {
    padding: 0;
    margin: 0;
    margin-left: 20px;
    margin-right: 20px;
}

#navbottom ul li {
    display: inline-block;
    position: relative;
    list-style-type: none;
    margin: 5px 10px;
}

You had unnecessary float: left in several places. Simply changing the display property to inline-block can achieve the desired result.

I didn't modify it for the top navigation, but feel free to experiment with it.

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

Button styles that have been verified will not be shown in Firefox

Hello, first time poster here! Client specifications for CSS: button { border: 1px solid #B8B7B8; border-radius: 8px; height: 4em; margin: 25px 2px 25px 0; text-align: center; text-decoration: none; width: 4em; } button:active, button:che ...

cssfirefoxbutton

Events Unavailable for Viewing - Full Calendar - Database Error Encountered

I am currently developing a calendar application. While I have managed to successfully display the calendar and add events, I am facing an issue with displaying events on the monthly view. Here is a snippet of the HTML code being used: <head> &l ...

phphtmlsqljson

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

javascriptjquerycss

Show or hide the expand/collapse button based on the height of the container

Looking for a way to hide content in a Div if it's taller than 68px and display an expand option? The challenge lies in detecting the height of the responsive Div, especially since character count varies. I attempted using PHP to count characters bu ...

javascriptphpjqueryhtmlcss

Choosing a value from a dropdown automatically based on the selection of a specific value from another dropdown

Currently, I am working on a project that involves selecting a value from a dropdown menu based on the selection from another dropdown menu. var gender1 = document.querySelector("#gender1"); var gender2 = document.querySelector("#gender2"); gender1.add ...

javascripthtml

Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...

cssvertical-alignment

Utilize Wordpress TinyMCE to apply the underline decoration using the "U" tag instead of the style

Is there a way to modify the function of the button in the WordPress content textarea of TinyMCE? Specifically, I am referring to the "u" button for underline formatting. <span style="text-decoration-line: underline;">text underlined</span> I ...

htmlwordpresstinymceeditor

JavaScript can dynamically attach EventListeners to elements, allowing for versatile and customized event

I am currently populating a table using data from an XML file. One of the columns in the table contains links to more details. Due to the unique requirements of my web page setup (Chrome extension), I need to dynamically add an event handler when the table ...

javascripthtmldom-eventsaddeventlistenerevent-listener

Maintaining the aspect ratio of images in Bootstrap Carousel: A complete guide

Using the default carousel from Bootstrap template has been working well for me. However, I've encountered an issue where resizing the browser window distorts the image aspect ratio by squishing it horizontally. I've tried various solutions to m ...

javascripthtmlcsstwitter-bootstrap

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

cssangularprimengng-deep

How can we transfer animation duration and `@keyframe` values through a function in CSS?

In my angular project, I am currently adding animations to text. However, I want to make these animations dynamic. For instance, I have a CSS class called .slide-in-top with an animation time set to 1.3s. Instead of this static value, I want to be able to ...

htmlcssangularanimationkeyframe

Parsing CSS with PHP

Having an issue with my CSS link for images and need some assistance: background-image:url(images/background.gif); I'm looking to adjust the directory by adding ../. The code I aim to modify is as follows: background-image:url(../images/background. ...

phpcssparsing

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

javascripthtmlcss

Adjust the stroke and fill colors of an SVG element when hovering over it

I am facing a challenge with an SVG image that I have: https://i.stack.imgur.com/r4XaX.png When hovered over or clicked, it should change to https://i.stack.imgur.com/EHRG2.png Current Icon <svg width="24" height="24" viewBox="0 0 24 24" fill="non ...

javascriptcssreactjssvgfigma

Having issues with the functionality of the Previous/Next button in my table

I am facing a challenge with my table as I am trying to include previous/next button for users to navigate through it. However, the interaction doesn't seem to be functioning properly, and I suspect that I need to establish a connection between the bu ...

javascripthtmlcss

An effective way to prevent right-clicking on iframes across all websites

I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...

javascriptjqueryhtmlcssasp.net

Get names with specific characteristics by using a Javascript object that acts as an associative array

Can someone help me with my code? I'm trying to create an input box that, when I type in "A", will display the names of students who have earned "A" grades. I feel like I'm close to getting it right, but there's something missing. Any assist ...

javascripthtmlarraysassociative

Customizing button appearances in the control div on Google Maps - A guide

Is there a way to manipulate elements and adjust styles by clicking buttons on the map control div? I want to achieve the same effect on the map as with the buttons in the table. Code: jsFiddle Update: Thanks to your assistance, I was able to achieve th ...

javascriptcssgoogle-mapsgoogle-maps-api-3google-maps-styling

Adjust the size of the div to match its parent's size when resizing

Can a div be resized to match its parent's size on window resize? Here is the current HTML code: <div class="sliderContainer"> <div id="cyler"> <div class="cy1" style="background-image:url(images/Keggy_Banner_Ie.jpg); back ...

javascriptjquerycss

Hover over an element to trigger the background fading effect on the parent div

I'm looking to create a hover effect on an element within a fullscreen div. When I hover over the element, I want a background image to fade in on the div with the class ".section." While I can easily display the background image, I am unsure of how t ...

jquerycssbackground-imagetransitionfade