Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Thanked 0 Times in 0 Posts

    Exclamation Navigation Menu Issue with Firefox on First Load, Refresh Fixes

    Hey everyone,

    I am a very amateur web designer, who is also very new to CSS, so please be gentle...

    I am having a very frustrating issue with Firefox. My website is designed so that when my main menu navigation bar is too long for the screen, it automatically converts into a drop down menu. Naturally, this function is to better serve mobile and tablet devices.

    This feature works perfectly on every browser except for Firefox. With Firefox, my main navigation menu bar is converted to drop down menu, even though I am viewing it on a full screened computer, not a tablet or mobile device.

    AND, as soon as I refresh the page, it displays just fine. And, as long as I don't clear my history or cache, it will continue to display just fine.

    Not a "huge" deal, but super annoying that new visitors to my site who are using Firefox get this experience as their first experience.

    I have studied my CSS code for hours, searched through countless numbers of CSS forums for help, tweaked every bit of code I thought was relevant, and I am completely baffled.

    Maybe there is some sort of overstack issue occurring? Maybe not. Who knows - as I say, I am an amateur.

    If anyone could look at my code and give me some help, I would be very appreciative.

    My website is http://mikerylander.com


    PS: This is the first time I've not been able to solve a CSS or HTML problem on my own, so hopefully the answer isn't something ridiculously easy.

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 665 Times in 660 Posts
    this is more of a CSS question than a javascript one, as I'm guessing that the piece of code that does this is:
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    hgroup h1.site-title {
        font-size: 5.625em;
        font-weight: bold;
        line-height: .75;
        padding-top: 40px;
        text-shadow: 7px 7px 0 rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
    it seems to me that you have to target desktops separately. Have a look at this link

    but really, you would be better off posting to the CSS branch of the forum


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts