Coding Problem.. Help Please

by npaige
5 replies
  • WEB DESIGN
  • |
Hi folks,

I thought this was in the bag... but guess not!

I wanted menu descriptions visible on my site.
Seems it's not so cut n' dry.
I researched it, found the 'walker code,' tried it.. didn't work out.

So.. found someone on Fiverr who said she could do it.
And she did.... after some rounds of back n forth.. on MY computer it looked great. I could edit some of the css in the custom css field and choose the font style, size and color. I had the descriptions smaller than the items above, a different color and size.

Now.. I am at a friend's house and pulled it up on her Mac (I use a PC) and it is not right! Please take a look. The descriptions under the menu items morphed into the menu items. They took on the same font style, size, and color and now they are not underneath. The size of it all also created 3 lines of menu instead of just one.

I need to be able to edit the menu descriptions independently of the menu items and have it work on all computers. Maybe this is a simple fix? Why did it look fine on my computer and not this one?

So I just opened my iPad and it looks perfect here. I don't get it. Good on PC, good on iPad, no good at least on THIS mac! Please advise.

Mountain River Stream l Fabulous Outdoor Gear Reviews & Tales Of Intimate Adventures [By & For Women w/ Dr. Nicki]

Thank you!
#coding #problem
  • Profile picture of the author Michael71
    Which browser was used? Could you provide a screenshot?
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7791123].message }}
    • Profile picture of the author npaige
      Firefox.

      So I did something that shifted it but still not perfect.

      The person put css in the custom css area of the editor.
      My theme, freshlife, has its own custom css area, not in the editor.
      I cut the css she put in and pasted it in the theme's area where I have other css coding, inc. code for my top menu.

      It made it almost perfect but still went on to a 2nd line in the menu (meaning didn't fit across the top as one line).. so I put it back.

      But now it's still holding.
      I just don't quite get it.
      Here is the screen shot. (you can see the "contact" came down and made another line)
      But it is perfect on my ipad.


      Originally Posted by Michael71 View Post

      Which browser was used? Could you provide a screenshot?
      {{ DiscussionBoard.errors[7791199].message }}
  • Profile picture of the author Michael71
    In the CSS:

    Change the padding in

    Code:
    .topnav li a {
        font-size: 11px;
        font-weight: bold;
        line-height: 18px;
        padding: 7px 13px 6px 13px;
        text-decoration: none;
        text-transform: uppercase;
    }
    to

    Code:
    .topnav li a {
        font-size: 11px;
        font-weight: bold;
        line-height: 18px;
        padding: 7px 12px 6px 12px;
        text-decoration: none;
        text-transform: uppercase;
    }
    That worked for me in Firefox.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7791355].message }}
    • Profile picture of the author npaige
      Hi,

      Did it but it didn't change it.
      So I put it back.
      Are you on a mac?

      Why do some computers read it correctly and others do not?



      Originally Posted by Michael71 View Post

      In the CSS:

      Change the padding in

      Code:
      .topnav li a {
          font-size: 11px;
          font-weight: bold;
          line-height: 18px;
          padding: 7px 13px 6px 13px;
          text-decoration: none;
          text-transform: uppercase;
      }
      to

      Code:
      .topnav li a {
          font-size: 11px;
          font-weight: bold;
          line-height: 18px;
          padding: 7px 12px 6px 12px;
          text-decoration: none;
          text-transform: uppercase;
      }
      That worked for me in Firefox.
      {{ DiscussionBoard.errors[7791395].message }}
    • Profile picture of the author npaige
      This is in the custom.css field.
      Perhaps something adjusted here?

      */
      #top {
      height:50px;

      }
      #top ul li span {
      padding: 2px 13px 1px 0;
      font-weight: normal;
      font-size: 12px;
      font-family: geneva, tahoma;
      color: #672814;
      display: block;
      }



      Originally Posted by Michael71 View Post

      In the CSS:

      Change the padding in

      Code:
      .topnav li a {
          font-size: 11px;
          font-weight: bold;
          line-height: 18px;
          padding: 7px 13px 6px 13px;
          text-decoration: none;
          text-transform: uppercase;
      }
      to

      Code:
      .topnav li a {
          font-size: 11px;
          font-weight: bold;
          line-height: 18px;
          padding: 7px 12px 6px 12px;
          text-decoration: none;
          text-transform: uppercase;
      }
      That worked for me in Firefox.
      {{ DiscussionBoard.errors[7791401].message }}

Trending Topics