CSS媒体查询未调整导航栏中徽标的大小

时间:2018-07-01 13:25:57

标签: html css media responsive

我正在构建一个响应式网站,但在导航栏中无法使徽标响应。它必须与全屏导航栏的高度相同(并具有自动宽度以保持缩放),然后在平板电脑/手机模式下(您会看到断点),它必须为最大宽度(并保持自动高度)再次缩放),使其填满导航栏宽度。

我已经尝试了这种方法的一百万种变体,将其放在不同的div中,并尝试了不同的媒体查询来使其执行此操作,但是我显然缺少了一些东西。

代码:

HTML

<!doctype html>
<html>

 <head>

<meta charset="utf-8">

<title>Primeheat | Chichester Plumbing &amp; Heating Installation, 
 Maintenance &amp; Emergency Breakdown</title>

<meta name="viewport" content="width=device-width">

 <link href="css/style.css" rel="stylesheet" type="text/css">

    </head>

<body>

        <nav>
    <div class="menulogo"> <img src="images/PrimeHeat Logo.png" 
alt="PrimeHeat Logo" class="image1"> </div>

    <label for="drop" class="toggle">Menu</label>
    <input type="checkbox" id="drop" />
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
                <!-- First Tier Drop Down -->
                <label for="drop-1" class="toggle">Plumbing</label>
                <a href="#">Plumbing</a>
                <input type="checkbox" id="drop-1"/>
                <ul>
                    <li><a href="#">Installation</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Breakdown</a></li>
                </ul> 

            </li>
            <li>

            <!-- First Tier Drop Down -->
            <label for="drop-2" class="toggle">Heating</label>
            <a href="#">Heating</a>
            <input type="checkbox" id="drop-2"/>
            <ul>
                <li><a href="#">Installation</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Service</a></li>
                <li>


            </ul>
            </li>

            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>


    <div id="navbar2" div id class="navbar2">   

    <h1 class="h1">Welcome to Primeheat Plumbing & Heating</h1>

</div>

 </body>

</html>

CSS

 @charset "utf-8";
 /* CSS Document */
 #menulogo {  max-width: 5%;
        height: auto;}

 image1 {max-width: 5%;
    height: auto;
}

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

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

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

 h3 a {
color: #278189;
 }

a {
color: #278189;
 }

 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;
 }

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

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

#menulogo {
display: block;
padding: 0px;
float: left;
font-size:20px;
max-width: 5%;
height: auto;}

 }

 /* 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: #fff;
}

/* Styling the links */
nav a {
display:block;
padding:14px 20px;  
color:#278189;
font-size:17px;
text-decoration:none;
}


nav ul li ul li:hover { background: #3A3A3A; }

/* Background color change on Hover */
nav a:hover { 
background-color: #3A3A3A; 
}

 /* 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 { content:  ' +'; }
 li > a:only-child:after { content: ''; }


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

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

#menulogo {
    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: #FFF;
    padding:14px 20px;  
    color:#278189;
    font-size:17px;
    text-decoration:none;
    border:none;
}

.toggle:hover {
    background-color: #3A3A3A;
}

/* 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%;
    }

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: #3A3A3A;
}

nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
    padding:14px 20px;  
    color:#278189;
    font-size:17px; 
}


nav ul li ul li .toggle,
nav ul ul a {
    background-color: #C2C2C2; 
}

/* Hide Dropdowns by Default */
nav ul ul {
    float: none;
    position:static;
    color: #278189;
    /* 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%;
}

}

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

menulogo {max-width: 100%;
            height: auto
} 
}

0 个答案:

没有答案