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

Is it possible for .php files that don't contain any PHP code to be sent to the interpreter?

Does the PHP interpreter process .php files on a standard LAMP stack even if they do not contain any PHP code? In essence, is there any performance or processing impact in having a .php file without any actual PHP code compared to simply making it an .htm ...

phphtmlperformance

Why is it not achievable to dynamically update the HTML DOM structure while `<!DOCTYPE html>` is specified?

The following HTML code is causing an issue: <!DOCTYPE html> <html> <head> <title>Clear a Timer</title> <meta charset="utf-8" /> <script> var theTimer, xPosition = 0, theImage; functio ...

html

Having trouble changing font color using AngularJS - what am I missing?

I am currently working on a straightforward program where the user inputs text into a textbox, and that text is displayed below. However, I also want the font color to change based on what the user types in the "color" field. Why isn't this functional ...

cssangularjsstyles

What are the steps for creating a dropdown menu that allows for easy selection of the correct item

I am dealing with a dropdown menu as shown below. <select name="slt"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="3">Three +</option&g ...

javascriptjqueryhtmlasp.net

CSS: Using absolute and relative positioning within a parent element can result in elements overlapping

I want to create a box in html/css where the read more hyperlink text is positioned over the background image. The goal is to have additional text added to the description without overlapping the image. Here's an example of the current issue. Curren ...

htmlcsssass

Lower the transparency of a container without affecting the transparency of its elements

Is there a way to decrease the transparency of the page contents container background without affecting the opacity of the actual content? <div id="container"> <div id="page contents"> Insert your amazing articles and more here. </ ...

cssopacity

Issue with Jquery function not executing on second attempt

/** Creates a table of iTunes data in HTML format **/ var appendValues = function(songArray) { songArray.each(function() { var title = $(this).find("im\\:name").eq(0).text(); var songImage = $(this).find("im\\:image").eq(0).text(); var ...

javascriptjqueryhtmlajaxweb

The conversion of XML to HTML using setQuery(QString) in QXmlQuery is unsuccessful

Whenever I use the method setQuery(QUrl(file.xsl)), it functions properly. However, if I first load the file into a QString and then invoke setQuery(theString), the subsequent evaluateTo() operation fails (resulting in a boolean exception and empty result) ...

htmlxmlqtxsltqxmlquery

What causes a fixed position div to extend beyond the boundaries of the main container?

Below is the CSS for the fixed div: .top-container { position: fixed; width: 100%; z-index: 999; } Upon zooming out the screen, the div causes the main container to break on the right side while the left side remains unchanged. Refer to the screenshot be ...

css

Mobile Size Setting

Could someone please explain to me why when I test this code on Google Chrome using the mobile emulator for Galaxy S3, it displays the correct size (640x360), but when I try to load it on my actual Galaxy S5 or any other device, the size is different from ...

javascriptandroidhtmlmobileresponsive-design

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

javascriptcssvue.jsvuejs2vue-component

Accessing PHP variables within the HTML portion of a PHP document

Setting up my own contact form for the first time using PHP has been a learning experience. While I am able to receive emails from the form, I'm struggling to display the user-inputted information in the email. The HTML <label for="name"> ...

phphtmlvariables

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

Verify the presence of blank space with javaScript

I currently have a text box on my website. <input type="text" name="FirstName" value="Mickey"> My goal is to prevent the user from entering empty spaces, tabs, or new lines in the text box. However, I want to allow spaces between characters. Does a ...

javascripthtml

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

javascripthtmlcss

I am having trouble with node.js express not recognizing the path to my CSS files

My objective is to load information onto an HTML page using Node.js and Express. The issue I am facing is that when I try to open the main page (which displays all the books from the database), everything works smoothly - the CSS and JS files are located ...

javascriptcssnode.jsexpresshttp

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

When an if statement is triggered by an overload of information, it initiates the start of a fresh

I am in need of creating an if statement that will trigger whenever images with IDs 0 to 3 (a total of 4 images) are loaded. This if statement should then generate a new row containing 0 to 3 images, and the same logic needs to be applied for words as well ...

javascripthtmljsonif-statementbootstrap-modal

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Whenever I resize my webpage browser, the 3 text input boxes move and overlap, causing the page layout to become messy. View of The Browser in full screen (normal) View of The Browser when it's smaller (not normal) As a beginner programmer, I have ...

htmlcssformatting

Ways to adjust image placement and size post-rotation with CSS/JS to ensure it stays within the containing div and avoids being cut off

Check out this jsfiddle I've been experimenting with. The jsfiddle is designed to rotate an image by 90 degrees in either clockwise or anti-clockwise direction upon button click. However, the rotated image currently appears outside of its parent div. ...

htmlcssangularjsrotation