What could be causing the lack of downward rotation of my arrow in css? (specifically, the span element)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Web Agency</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
        <header>
        <div class="navbar">
            <div class="container">
                    <img src="imgs/Logo.png" alt="" class="img">

                <nav>
                    <ul>
                        <li><a href="index.html"></a>Home</li>
                        <li><a href="whowehelp.html"></a>Who We Help</li>
                        <li>
                            <a href="services.html"></a>Services
                            <span class="downArrow">&#62;</span>
                        </li>
                        <li><a href="technology.html"></a>Technology</li>
                        <li><a href="company.html"></a>Company</li>
                        
                    </ul>
                </nav>

                <div class="cta"></div>
                <button class="btn btn-primary">Get in Touch</button>
                </div>
            </div>
        </div>
        </header>






    <script src="main.js"></script>
</body>
</html>

Here is the HTML code snippet above and below you can find the related CSS code snippet. The issue I'm facing is that when I try to use the transform: rotate(90deg); property, it doesn't seem to rotate at all. Can anyone provide insight into why this might be happening?

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&family=Poppins:wght@100;200;500;700&display=swap");

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: beige;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 110px;
  margin-left: 150px;
  margin-top: 10px;
}

nav ul li {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin: 0 20;
  padding-right: 40px;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
}

nav ul li:hover {
  font-weight: 700;
}

.cta a {
  text-decoration: none;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.btn-primary {
  margin-top: 2.1rem;
  margin-left: 0;
  margin-right: 8rem;
  margin-bottom: 40px;
  padding: 1rem;
  background-color: #ee5f22;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  border-radius: 7%;
  font-size: 1.1rem;
  padding: 0px 20px;
  border: none;
}

.btn-primary:hover {
  border: 1.5px solid black;
  cursor: pointer;
}

.downArrow {
  color: #ee5f22;
  transform: rotate(90deg);
}

I am not sure if the problem lies in the usage of the span element or if the rotate function is being applied incorrectly. I have tried adjusting the rotation values without success. Any suggestions would be greatly appreciated. Thank you for your assistance!

htmlcss

Answer №1

Change the display to inline-block.

.downArrow {
  color: #ee5f22;
  transform: rotate(90deg);
  display: inline-block;
}

Inline elements are not typically transformable, as stated in the specification:

A transformable element can fall into one of the following categories:

  • all elements governed by the CSS box model except for specific types like non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],

  • all SVG paint server elements, along with the clipPath element and certain SVG renderable elements excluding descendants of text content elements [SVG2].

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&family=Poppins:wght@100;200;500;700&display=swap");

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: beige;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 110px;
  margin-left: 150px;
  margin-top: 10px;
}

nav ul li {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin: 0 20;
  padding-right: 40px;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
}

nav ul li:hover {
  font-weight: 700;
}

.cta a {
  text-decoration: none;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.btn-primary {
  margin-top: 2.1rem;
  margin-left: 0;
  margin-right: 8rem;
  margin-bottom: 40px;
  padding: 1rem;
  background-color: #ee5f22;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  border-radius: 7%;
  font-size: 1.1rem;
  padding: 0px 20px;
  border: none;
}

.btn-primary:hover {
  border: 1.5px solid black;
  cursor: pointer;
}

.downArrow {
  color: #ee5f22;
  transform: rotate(90deg);
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZ Digital Agency</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
        <header>
        <div class="navbar">
            <div class="container">
                    <img src="imgs/Logo.png" alt="" class="img">

                <nav>
                    <ul>
                        <li><a href="index.html"></a>Home</li>
                        <li><a href="whowehelp.html"></a>Who We Help</li>
                        <li>
                            <a href="services.html"></a>Services
                            <span class="downArrow">&#62;</span>
                        </li>
                        <li><a href="technology.html"></a>Technology</li>
                        <li><a href="company.html"></a>Company</li>
                        
                    </ul>
                </nav>

                <div class="cta"></div>
                <button class="btn btn-primary">Contact Us</button>
                </div>
            </div>
        </header>






    <script src="main.js"></script>
</body>
</html>

Answer №2

apply position: absolute; to the .downArrow class

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&family=Poppins:wght@100;200;500;700&display=swap");

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: beige;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 110px;
  margin-left: 150px;
  margin-top: 10px;
}

nav ul li {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin: 0 20;
  padding-right: 40px;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
}

nav ul li:hover {
  font-weight: 700;
}

.cta a {
  text-decoration: none;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.btn-primary {
  margin-top: 2.1rem;
  margin-left: 0;
  margin-right: 8rem;
  margin-bottom: 40px;
  padding: 1rem;
  background-color: #ee5f22;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  border-radius: 7%;
  font-size: 1.1rem;
  padding: 0px 20px;
  border: none;
}

.btn-primary:hover {
  border: 1.5px solid black;
  cursor: pointer;
}

.downArrow {
  position: absolute;
  color: #ee5f22;
  transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZ Digital Agency</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
        <header>
        <div class="navbar">
            <div class="container">
                    <img src="imgs/Logo.png" alt="" class="img">

                <nav>
                    <ul>
                        <li><a href="index.html"></a>Home</li>
                        <li><a href="whowehelp.html"></a>Who We Help</li>
                        <li>
                            <a href="services.html"></a>Services
                            <span class="downArrow">&#62;</span>
                        </li>
                        <li><a href="technology.html"></a>Technology</li>
                        <li><a href="company.html"></a>Company</li>
                        
                    </ul>
                </nav>

                <div class="cta"></div>
                <button class="btn btn-primary">Contact Us</button>
                </div>
            </div>

        </header>





    <script src="main.js"></script>
</body>
</html>

Answer №3

To make the span behave like an inline-block, add the following css property:

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&family=Poppins:wght@100;200;500;700&display=swap");

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: beige;
}

nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 110px;
  margin-left: 150px;
  margin-top: 10px;
}

nav ul li {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin: 0 20;
  padding-right: 40px;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
}

nav ul li:hover {
  font-weight: 700;
}

.cta a {
  text-decoration: none;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.btn-primary {
  margin-top: 2.1rem;
  margin-left: 0;
  margin-right: 8rem;
  margin-bottom: 40px;
  padding: 1rem;
  background-color: #ee5f22;
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  border-radius: 7%;
  font-size: 1.1rem;
  padding: 0px 20px;
  border: none;
}

.btn-primary:hover {
  border: 1.5px solid black;
  cursor: pointer;
}

.downArrow {
display:inline-block;
  color: #ee5f22;
  transform: rotate(90deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZ Digital Agency</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
        <header>
        <div class="navbar">
            <div class="container">
                  <img src="imgs/Logo.png" alt="" class="img">

                <nav>
                    <ul>
                        <li><a href="index.html"></a>Home</li>
                        <li><a href="whowehelp.html"></a>Who We Help</li>
                        <li>
                            <a href="services.html"></a>Services
                            <span class="downArrow">&#62;</span>
                        </li>
                        <li><a href="technology.html"></a>Technology</li>
                        <li><a href="company.html"></a>Company</li>
                        
                    </ul>
                </nav>

                <div class="cta"></div>
                <button class="btn btn-primary">Contact Us</button>
                </div>
            </div>
        </div>
        </header>
    <script src="main.js"></script>
</body>
</html>

Answer №4

rotate() will not have any effect on inline elements like <span>. To make it work, simply add display:inline-block to the element.

span {
  transform: rotate(90deg);
}

.ib {
  display: inline-block;
}
<p>
  This is <span>inline</span>
</p>
<p>
  This is <span class="ib">inline-block</span>
</p>

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

What is the best way to display input data (with names and values) in a textarea field

I'm currently working on a project that requires the value of a textarea to be updated whenever one of the input values in the same form is changed. Here is the HTML code: <form id="form" action="" method=""> <textarea readonly class="overv ...

javascriptjqueryhtml

A dynamically-generated dropdown element in the DOM is being duplicated due to JavaScript manipulation

Currently, I am dynamically adding a dropdown element to the page using javascript. The goal is for this dropdown to modify the properties displayed on a map. However, when attempting to add the element after the map loads, I encounter an issue where the d ...

javascripthtml

Decoding a Json list with angularJS

I have a JSON dataset structured as follows: $scope.jsondata = [{filename:"/home/username/textfiles/0101907.txt"},{filename:"/home/username/textfiles/0124757.txt"},{filename:"/home/username/textfiles/0747332.txt"} ... ]; Here is my HTML code: <li ng ...

angularjsjsonhtml

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

Utilizing facebox, I am initiating a small modal dialog with a form and attempting to retrieve the value from a text field on that form using javascript. Below is the HTML code: <div id="dialog-form95" style="display:none"> <div class="block"> ...

javascripthtmlcssgetelementbyidfacebox

Utilize HTML5 Application Cache solely for storing and managing dependencies

My goal is to selectively cache certain files like JavaScript, CSS, fonts, and image sprites. Should I create a manifest file for these specific files or rely on the browser's caching mechanism? If using a manifest is preferred, can I still prevent ...

htmlbrowser-cache

Incorporating Content-Disposition headers to enable the file to be both downloaded and opened

I'm having trouble allowing users to both view and download files on a web page. I've tried setting headers and using JavaScript, but can't seem to get it right. My goal is to have an HTML page with two links for each file - one to open in ...

javascripthtmlhttp-headerscontent-disposition

Distinguishing between client side rendering and server side rendering is the backbone of web development

My goal is to give users the option to request webpages from my website either directly from the server or by clicking on links, which will be managed by Backbone's router. When a user requests a webpage directly from the server, they will receive a ...

javascripthtmlbackbone.jssingle-page-application

Add a variety of input values to a div in designated spots

Objective: The aim is to allow the user to connect form fields with specific locations within a content from another div, and then add the text entered in individual input fields to those corresponding locations. Here is the link to the fiddle HTML: < ...

javascriptjqueryhtml

The Challenges of CSS Specificity in Multiple Browsers

I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension. Here is a sample of CSS code: input[type="file"] ...

htmlcsscross-browser

What is the method for incorporating more outer space into an inline SVG?

I have a situation where I am using an inline SVG with a transparent fill and a dark stroke. The aim is to change the fill color to dark when hovered over. However, increasing the stroke-width to make the stroke more visible causes it to extend beyond the ...

csssvginline-svg

Does IE 9 support Display Tag?

Although this may not be directly related to programming, I have been unable to locate any information regarding the compatibility of IE 9 or even 8 with the Display Tag Library. The documentation is silent on the matter. If anyone has encountered any cha ...

htmlcssinternet-explorer-8internet-explorer-9displaytag

Tips on implementing a Javascript function triggered by a user's click within the video player frame

<script> function greet() { alert("hello"); } </script> <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="greet()"></iframe> .Kindly assist me, please. ...

javascriptphphtml

The ng-include feature seems to be malfunctioning

After building a basic web page using AngularJs, I ran into an issue when attempting to integrate header.htm into index.html - nothing was displaying in the browser. index.html <html> <script src="https://ajax.googleapis.com/ajax/libs/angul ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-include

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

javascriptphphtmlcss

"Enhance Your Form with Ajax Submission using NicEdit

Currently, I am utilizing nicEditor for a project and aiming to submit the content using jQuery from the plugin. Below is the code snippet: <script type="text/javascript"> bkLib.onDomLoaded(function() { new nicEditor().panelInstance('txt1' ...

javascriptjqueryhtmlajaxnicedit

Is it possible to manually trigger a version change transaction in IndexedDB?

I have been working on a Chrome extension that uses the IndexedDB to store data client-side in an IDBObjectStore within an IDBDatabase. The data structure requires users to be able to modify the object store freely, such as adding new objects or modifying ...

javascripthtmlgoogle-chrome-extensiondom-eventsindexeddb

WordPress does not recognize the jQuery function

I have encountered an issue with my code where a simple HTML jQuery slider works fine in a standalone file, but when I integrate it into WordPress, it no longer functions properly. The slider is being added to the index.php file by hardcoding the script li ...

javascriptphpjqueryhtmlwordpress

How to use Vue.js to automatically redirect to a URL when a button is clicked

I have created a button that, when clicked, should redirect to a URL passed in it. Below is the code snippet: <template> <button type="button" v-on:click="gotosite(modalDetails.final.product_url)">Buy</button> </template> <s ...

htmlvue.jsvuejs2

Unexpected behavior observed with Mui theme breakpoints

I have defined breakpoints for my MUI React-based app like so export const lighttheme = createTheme({ palette: palette, typography: typography, breakpoints: { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, ...

cssreactjsmaterial-uibreakpoints

What are some strategies for increasing efficiency in my drag and drop process?

Update #2 Wow, transition was stuck at .35s. My CSS just wasn't updating properly :( UPDATE: Anyone know if requestAnimationFrame could help with this? I've got a rotating image reel and I want users to be able to swipe left or right to switch ...

javascripthtmlcss