DEVHIDE
Login Or Sign up

Hamburger menu font-size issue

736 Views Asked by At


My web site is html and css only. I wish it to remain so.
Web-site URL: www.yoga-grenoble.net.
I started to update a web site so that it displays best on mobile phone. I develop specific css with hamburger menu. However, I face an issue with the font-size within the hamburger menu. It displays normal on my PC browser (even when resizing the window as narrow as mobile phone) but very small on my mobile device (Motorola X).
Mobile web-site URL: www.yoga-grenoble.net/New
css:

  • www.yoga-grenoble.net/New/mobileMain.css
  • www.yoga-grenoble.net/New/mobileNav.css

By the way, I have the same issue with my h2 title in the header zone ("Centre de yoga de Grenoble").

I am stuck here. Do you have any idea where this comes from?
Chris.

-- Edit. Code is quite huge that's why I only linked to it: html:

  • www.yoga-grenoble.net/New/index.html

css:

  • www.yoga-grenoble.net/New/mobileMain.css
  • www.yoga-grenoble.net/New/mobileNav.css

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

  <title>Centre de yoga de Grenoble</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="Description" content="Centre de yoga de Grenoble- le clair de l'aube - accueil" />
  <meta name="Author" content="CLe" />
  <meta name="Expires" content="never" />
  <meta name="Geography" content="Fontaine, 38600, Grenoble, 38000, France" />
  <meta name="Keywords" content="Grenoble, Centre de yoga, yoga, nidra, meditation, shine, sophrologie,
                                  , nidra, aromatherapie, medecine chinoise, acuponcture, Qi Gong, eidetique, yoga du rire, Clair de l'aube" />
  <meta name="robots" content="index,follow" />

  <meta name="google-site-verification" content="g8sdkSveYxKwvHWjNx-xV-eVFExRraxk_mCGhu4tf7Y" />

  <link rel="stylesheet" type="text/css" href="./mobileMain.css" title="Normal" />
  <link rel="stylesheet" type="text/css" href="./mobileNav.css" title="Normal" />
<!--
  <link rel="stylesheet" type="text/css" media="screen and (max-width: 749px)" href="./mobileMain.css" title="Normal" />
  <link rel="stylesheet" type="text/css" media="screen and (max-width: 749px)" href="./mobileNav.css" title="Normal" />
  <link rel="stylesheet" type="text/css" media="screen and (min-width: 750px)" href="./fullWidthMain.css" title="Normal" />  
  <link rel="stylesheet" type="text/css" media="screen and (min-width: 750px)" href="./fullWidthNav.css" title="Normal" />  
  <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico" />
-->  


</head>


<body>

    <div id="container">

        <div id="header">
            <h1>Le Clair de l'Aube</h1>
            <img src="./images/LotusBanner.jpg" alt="Lotus du centre de yoga de Grenoble" class="leaves" />
            <h2>Centre de yoga de Grenoble</h2>
        </div>

        <!-- Menu defilant: inclure dans le header : <link rel="stylesheet" type="text/css" href="./menu_defilant.css" title="Normal" /> -->
        <nav class="nav">
            <ul>
               <li class="home  current"><a href="#nogo">Accueil</a></li>
               <li class="visite"><a href="./visite.html" title="Visite">Visite</a></li>
               <li class="activites"><a href="#nogo" title="Activites">Activit&eacute;s&nbsp;&nbsp;&#9654;</a>
                   <ul>
                   <li class="subact_EcoleDeYogaDeGrenoble"><a href="./EcoleDeYogaDeGrenoble.html" title="Yoga">Ecole de yoga de Grenoble</a></li>
                   <li class="subact_KailashNathYoga"><a href="./KailashNathYoga.html" title="Yoga">Yoga avec Guillaume</a></li>
                   <li class="subact2"><a href="./YogaMarisel.html" title="Yoga">Yoga avec Marisel</a></li>
                   <li class="subact2"><a href="./PilatesMarjolaine.html" title="Pilates">Pilates avec Marjolaine</a></li>
                   <li class="subact_eidetique"><a href="./imageEidetique.html" title="Image eidetique">Image eid&eacute;tique</a></li>
                   <li class="subact_yogaDuRire"><a href="./yogaDuRire.html" title="yoga du rire">Yoga du rire</a></li>
                   <li class="subact_medecineChinoise"><a href="./medecineChinoise.html" title="medecine chinoise">M&eacute;decine chinoise</a></li>
                   <li class="subact_aromatherapie"><a href="./aromatherapie.html" title="aromatherapie">Aromath&eacute;rapie</a></li>
                   <li class="subact_sophrologie"><a href="./sophrologie.html" title="sophrologie">Sophrologie</a></li>
                   <li class="subact_meditation"><a href="./meditations.html" title="Meditation">M&eacute;ditations</a></li>
                   <li class="subact_QiGong"><a href="./QiGong.html" title="Qi Gong">Qi Gong</a></li>
                </ul>
               </li>
               <li class="calendrier"><a href="./pdf/Planning.pdf">Planning</a></li>
               <li class="contact"><a href="./contact.html" title="contact">Contact</a></li>
               <li class="plan"><a href="./plan.html" title="Plan">Plan</a></li>
            </ul>
        </nav>        <!-- Fin menu defilant -->

        <div id="leftnav">
                <p style="margin-bottom: 0px;">Partager</p>
                <ul class="partage">
                  <li id="share-facebook"><a href="http://www.facebook.com/sharer.php?u=http://www.yoga-grenoble.net&t=Centre de yoga de Grenoble" title="Share on Facebook" target="_blank"><img src="./images/icones/facebook.png" alt="Share on Facebook" /></a></li>
                  <li id="share-twitter"><a href="http://twitter.com/home?status=Centre de yoga de Grenoble http://www.yoga-grenoble.net" title="Tweet this" target="_blank"><img src="./images/icones/twitter.png" alt="Tweet this" /></a></li>
                  <li id="share-delicious"><a href="http://delicious.com/post?url=http://www.yoga-grenoble.net&title=Centre de yoga de Grenoble" title="Add to Delicious" target="_blank"><img src="./images/icones/delicious.png" alt="Add to delicious" /></a></li>
                  <li id="share-google"><a href="https://plusone.google.com/_/+1/confirm?hl=fr&url=http://www.yoga-grenoble.net&title=Centre de yoga de Grenoble" title="Share on Google +" target="_blank"><img src="./images/icones/google.png" alt="Share on Google +" /></a></li>
                  <li id="share-linkedin"><a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.yoga-grenoble.net&title=Centre%20de%20yoga%20de%20Grenoble&summary=Centre%20Le%20Clair%20de%20l'Aube&source=YogaGrenoble" title="Share on LinkedIn" target="_blank"><img src="./images/icones/linkedin.png" alt="Share on LinkedIn" /></a></li>
                </ul>
                <p><br /><br /></p>

            <h1>Liens</h1>
                <p><a href="./planDuSite.html">Plan du site web</a></p>
        </div>


        <div class="article">

            <h1>Ann&eacute;e 2016 - 2017</h1>

            <div class="article_info">

                Par <a href="#">Nathalie</a>

            </div>

            <p>
                C'est la rentr&eacute;e aussi au Clair de l'Aube, les activit&eacute;s hebdomadaires ont repris le 12
                septembre, avec quelques nouveaut&eacute;s &nbsp;:
                </p>
                <ul>
                  <li>Le yoga avec Nathalie&nbsp;: cours le lundi matin, midi et soir + le mercredi midi et soir ; ateliers r&eacute;guliers. Et le cours en quinzaine pour les enfants du mercredi
                      apr&egrave;s-midi grandit pour la tranche d'&agrave;ge des 7-14 ans, avec un nouveau cours pour les 11-17 ans le jeudi de 16h30 à 17h30, et toujours les ateliers mensuels
                      parents-enfants avec les 3-5 ans, et les plus grands ensuite 6-10 ans, le samedi matin</li>
                  <li>Le qi gong avec Delphine&nbsp;: cours le mardi midi et nouvel horarire le jeudi soir de 19h &agrave; 20h15</li>
                  <li>Le yoga avec Guillaume&nbsp;: 2 cours le mardi soir + une prolongation possible m&eacute;ditation-souffle de 21h30 &agrave; 22h</li>
                  <li>La m&eacute;ditation avec Nathalie (les mercredi soir de 20h &agrave; 21h en quinzaine)</li>
                  <li>Le cours de Pilates avec Marjolaine le mercredi matin se poursuit et se compl&egrave;te d'un cr&eacute;neau le jeudi de 17h45 &agrave; 18h45</li>
                  <li>Le yoga-nidra avec Nathalie (certains mercredi soir)</li>
                  <li>Un nouveau cours de yoga avec Marisel, le jeudi midi</li>
                  <li>Le yoga du rire avec Nathalie (certains vendredi midi) et aussi avec Fr&eacute;d&eacute;rire</li>
                  <li>La sophrologie avec Jacqueline passe sous la forme d'ateliers mensuels certains vendredi soirs</li>
                </ul>
            <p>
                  Et toujours, sur rendez-vous, des soins traditionnels chinois avec Delphine et maintenant aussi Isabelle le vendredi.
                </p>
            <p>
                  Plus d'informations sont disponibles dans l'onglet activit&eacute;s.
                </p>
            <p>
                  Jacques Vigne animera 3 jours de m&eacute;ditation les mardi 29 novembre, mercredi 30 et jeudi 1er d&eacute;cembre... &agrave; suivre pour les inscriptions d&eacute;j&agrave; ouvertes&nbsp;!
                </p>
            <p>
                  Au plaisir de vous recevoir au Clair de l'Aube.
                </p>

        </div>
        <div class="footer">
            <h1>&copy; Le Clair de l'Aube 2015</h1>
        </div>



    </div>

</body>

</html>

css: mobileMain.css

/* CSS Document */



body {

    background-color:#ffff99;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:0.74em;
    color:#000000;
    line-height:20px;
    cursor:default;
    margin:0;

}


#container {

    min-width:400px;
    padding:10px;
    background-color:#FFFFFF;
    margin:0 auto 0 auto;

}


#header {
    background-color:#3F4A3E;
    font-weight:bold;
}
#header img {
    visibility: hidden;
    width: 0px;
}

#header h1 {
    color:#FFFFFF;
    font-family:"Trebuchet MS", Arial, Verdana;
    font-weight:bold;
    padding:0;
    padding-left:20px;
    padding-top:10px;
    padding-bottom:20px;
    margin:0;
    border-bottom:2px solid #ffffff;
    font-size:150%;
}

#header h2 {
    color: #ffffff;
    float: right;
    font-family:"Trebuchet MS", Arial, Verdana;
    font-size:120%;
    letter-spacing: +0px;
    margin:0;
    margin-top: -30px; /* rattrapage de l'image */
    margin-right:10px;
    text-indent:5px;
    background-image:none;
    border-bottom:0;
}




.leaves {

    border-right:2px solid #ffffff;
    float:left;

}

#leftnav {
    border:1px solid #cccccc;
    padding:5px;
    float:right;
    clear:left;
    margin-top: -50px;
    background-image: url("images/backgrounds/case_background.jpg");
    background-position:bottom right;
    background-repeat:repeat-x;
    height: 25px;
}
#leftnav h1, #leftnav p a {
    visibility: hidden;
}
#leftnav p {
    margin-top: -6px;
}
#leftnav ul  {
     float: right;
     height: 26px;
     margin: 0;
     padding: 2px 0 0 0;
     color: #747B83;
     margin-top: -8px;
}

#leftnav ul li {
     display: inline-block;
     color: #747B83;
     margin: 0 2px;
     vertical-align: middle;
     height: 13px;
}

#leftnav ul li img  {
     border: none;
}

#sidebar h1,h2,h3 {
    font-family:Arial Narrow, Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
    color:#000000;
    border:none;
    background-image:none;
}

.article {
    margin-left:0px; /* compared to 170px for full width */
    padding:10px;
    border: 1px solid #cccccc;
    margin-bottom:10px;
    background-image: linear-gradient(white, #eeeeee);
    background-size: 50%;
    background-repeat: repeat-x;
    background-position: bottom;
}

.article p {

    margin:10px;

}

.article_info {

    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#666666;
    letter-spacing:2px;
    font-variant:small-caps;
    text-transform:lowercase;

}

.article_info a {

    font-weight:bold;
    text-decoration:none;
    color:#000000;

}

.article_large {

    margin-left:0px;
    padding:10px;
    border: 1px solid #cccccc;
    background-position:top left;
    background-repeat:no-repeat;
    margin-bottom:10px;
    background-image: linear-gradient(white, #eeeeee);
    background-size: 50%;
    background-repeat: repeat-x;
    background-position: bottom;
}


.article_large p {

    margin:10px;

}


.article h1, .article h2, .article h3, .article_large h1, .article_large h2, .article_large h3 {    

    font-family:Arial Narrow, Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
    color:#000000;
    border-bottom:2px solid #cccccc;
    background-image: url("images/backgrounds/lotus_bullet.png");
    background-position:top right;
    background-repeat:no-repeat;
    padding-bottom:5px;
    padding-top:5px;
    margin-top: 30px;
}

.footer {
    background-color:#3F4A3E;
    font-weight:bold;
}
.footer h1 {
    color:#FFFFFF;
    font-family:"Trebuchet MS", Arial, Verdana;
    font-weight:bold;
    text-align: right;
    padding:0;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:20px;
    margin:0;
    border-bottom:2px solid #ffffff;
    font-size:120%;
}


a {
    color:#9ACC53;
    text-decoration:none;
}
a:hover {
    color: tomato;
    text-decoration: underline;
}

mobileNav.css:

    .nav {
        position: relative;
        min-height: 25px;
        margin: 5px 0 20px 0;
        padding: 0;
    }   
    .nav ul {
        width: 120px;
        min-height: 25px;
        margin:0;
        padding: 2px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px #aaa;
        background: url(./images/icones/icon-menu.png) no-repeat 10px 10px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    /* center nav */
    .nav ul li.home {background:url(./images/icones/home.png) no-repeat, linear-gradient(white, #cfcfcf)}
    .nav ul li.visite {background:url(./images/icones/visite.png) no-repeat, linear-gradient(white, #cfcfcf);}
    .nav ul li.activites {background:url(./images/icones/activites.png) no-repeat, linear-gradient(white, #cfcfcf);;}
    .nav ul li.calendrier {background:url(./images/icones/calendrier.png) no-repeat, linear-gradient(white, #cfcfcf);;}
    .nav ul li.contact {background:url(./images/icones/contact.png) no-repeat, linear-gradient(white, #cfcfcf);;}
    .nav ul li.plan {background:url(./images/icones/plan.png) no-repeat, linear-gradient(white, #cfcfcf);;}

    .nav li {
        display: none; /* hide all <li> items */
        float: left;
        min-height: 25px;
        padding: 0;
        width: 120px;
        margin: 0;
        z-index:10;
        background: linear-gradient(white, #cfcfcf);
    }

    .nav ul .current {
        display: block; /* show only current <li> item */
        background: url(./images/icones/icon-menu.png) no-repeat 10px 10px, linear-gradient(white, #cfcfcf);
    }
    .nav ul li.current{
        background: url(./images/icones/icon-menu.png) no-repeat 10px 10px, linear-gradient(white, #cfcfcf);
    }   
    .nav a, a.visited {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
        color: #000;
    }
    .nav .current a {
        background: none;
        color: #000;
    }

    /* on nav hover */
    .nav ul:hover {
        background-image: none;
    }
    .nav ul:hover li {
        display: block;
        margin: 0;
    }
    .nav ul:hover .current {
        background: url(./images/icones/icon-check.png) no-repeat 10px 11px, linear-gradient(white, #cfcfcf);
    }

    .nav ul li ul {
        display: none;
    }
/* submenu */
.nav ul li.subact_EcoleDeYogaDeGrenoble {background:url(./images/icones/subact_EcoleDeYogaDeGrenoble.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_KailashNathYoga {background:url(./images/icones/subact_KailashNathYoga.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_meditation {background:url(./images/icones/subact_meditation.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_yogaDuRire {background:url(./images/icones/subact_yogaDuRire.png) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_sophrologie {background:url(./images/icones/subact_sophrologie.jpg) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_medecineChinoise {background:url(./images/icones/subact_medecineChinoise.jpg) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact2 {background:url(./images/icones/subact2.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_aromatherapie {background:url(./images/icones/subact_aromatherapie.jpg) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_danse {background:url(./images/icones/subact_danse.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_eidetique {background:url(./images/icones/subact_imageEidetique.png) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_psychotherapie {background:url(./images/icones/subact4.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_QiGong {background:url(./images/icones/subact_QiGong.jpg) no-repeat, linear-gradient(white, #cfcfcf)}


/* Sub Menus */
.nav li ul {
    position: absolute;
    margin-top: -1px;
    margin-left: 120px;
    display: none;
    width: 220px;
}

.nav li:hover ul {
    display: block;
}

.nav li ul li {
    display: block;
    min-height: 25px;
    width: inherit;
    padding-left: 0px;
}   




/* partage nav */
.nav.right ul {
    left: auto;
    right: 0;
    margin-top: -50px;
}

/* center nav */
.nav.center ul {
    left: 0%;
    margin-left: 0px;
}
html css responsive-design hamburger-menu
Original Q&A
1

There are 1 best solutions below

2
On

There is problem with responsive design. I don't see viewport. Try add this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> or find more on page below:

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Related Questions in HTML

Related Questions in CSS

Related Questions in RESPONSIVE-DESIGN

Related Questions in HAMBURGER-MENU

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.