خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Trying to change the size of one letter, but it's not written in the html codes

As the title says.

I'm using a template i found online, so i'm not really sure how to change the letter/symbol. It's small in the browser version, but not the phone version.
Click image for larger version.  Name: Capture.PNG  Views: 15  Size: 11.0 KB  ID: 17371
Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=.5" />
  <link rel="stylesheet" type="text/css" media="screen" href="styles/style.css">
  <title>Bed'n'Kitchen</title>

</head>
<body>

        <nav>
        <div id="logo">Hostel California</div>

        <label for="drop" class="toggle" id="menuuu">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">Hjem</a></li>
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-1" class="toggle">Billeder ▽</label>
                    <a href="#">Billeder</a>
                    <input type="checkbox" id="drop-1"/>
                    <ul>
                        <li><a href="#">Themes and stuff</a></li>
                        <li><a href="#">Plugins</a></li>
                        <li><a href="#">Tutorials</a></li>
                    </ul>

                </li>
                <li>

                <!-- First Tier Drop Down -->
                <label for="drop-2" class="toggle">Kurser ▽</label>
                <a href="#">Kurser</a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Resources</a></li>
                    <li><a href="#">Links</a></li>
                </ul>
                </li>
                <li><a href="#">Priser</a></li>
                <li><a href="#">Praktisk</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Eksterne Partnere</a></li>
            </ul>
        </nav>


        <p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
       

</body>
</html>
Code:
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
    background: white;
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
    padding: 0;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
    }

h1 {
    font-size: 60px;
    text-align: center;
    color: #FFF;
} 

h3 {
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: #FFF;
}

h3 a {
    color: #FFF;
}

a {
    color: #FFF;
}

h1 {
    margin-top: 100px;
    text-align:center;
    font-size:60px;
    line-height: 70px;
    font-family: 'Bree Serif', 'serif';
    }

#container {
    margin: 0 auto;
    max-width: 890px;
}

p {
    text-align: center;
    color: black;
}

.toggle,
[id^=drop] {
    display: none;
}

/* Giving a background-color to the nav container. */
nav {
    margin:0;
    padding: 0;
    background-color: #0081cb;
}

#logo {
    display: block;
    padding: 0 30px;
    float: left;
    font-size:20px;
    line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content:"";
    display:table;
    clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
    float: right;
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }
   
/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
    display:inline-block;
    float: left;
    background-color: #0081cb;
    }

/* Styling the links */
nav a {
    display:block;
    padding:14px 20px; 
    color: #FFF;
    font-size:17px;
    text-decoration:none;
    border-bottom: 1px solid #0081cb;
}


nav ul li ul li:hover {
    background: #006eb6;
   
}

/* Background color change on Hover */
nav a:hover {
    background-color: #006eb6;
    /*Mulighed, hvis far vil have flere undersider
    border-bottom: 1px solid black;*/
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
    display: none;
    position: absolute;
    /* has to be the same number as the "line-height" of "nav a" */
    top: 60px;
}
   
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;

}
   
/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
    position: relative;
    top:-60px;
    /* has to be the same number as the "width" of "nav ul ul li" */
    left:170px;
}

   
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { font-size: 8px; content:  ' ▽'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

   
    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }

    nav {
        margin: 0;
    }

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
    }

    /* Stylinf the toggle lable */
    .toggle {
        display: block;
        background-color: #0062a8;
        padding:14px 20px; 
        color:#FFF;
        font-size:17px;
        text-decoration:none;
        border:none;
    }

    #menuuu {
        background-color: #0081cb;
    }

   

    .toggle:hover {
        background-color: #004e93;

    }


    #menuuu:hover {
        background-color: #0062a8;

    }

    nav a:hover {
        background-color: #004e93;
    }
   
    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
    }

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        background-color: #0062a8;
        }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: #004e93;
    }
 
    nav ul li ul li .toggle,
    nav ul ul a,
  nav ul ul ul a{
        padding:14px 20px; 
        color:#FFF;
        font-size:17px;
    }
 
  /*HER ER KODEN*/
    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #004e93;
    }

    nav ul li ul li .toggle,
    nav ul ul a:hover {
        background-color: #00397b;
    }

    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position:static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }
       
    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
       
    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
    }

    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */

    }

}

@media all and (max-width : 330px) {

    nav ul li {
        display:block;
        width: 94%;
    }

}
Attached Thumbnails
Click image for larger version.  Name: Capture.PNG  Views: N/A  Size: 11.0 KB  ID: 17371  

برچسب: نویسنده: آیلین رضوانی تاريخ: پنجشنبه 2 شهريور 1396 ساعت: 23:38

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه