Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Bug Reports
  3. font is blurry in a custom menu bar

font is blurry in a custom menu bar

Scheduled Pinned Locked Moved Bug Reports
6 Posts 2 Posters 124 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pavloradich
    wrote on last edited by pavloradich
    #1

    Hi, I noticed that the font in my custom menu bar is a little blurry in comparison to other (static) typography on my website. Please have a look at the image and compare. "Green area" is menu bar, "red area" is normal sharp typography. If you look carefully you will see that the "green area" renders the font not as sharp as the "red area" does. Pay attention to the differences in letters "o", "t" or the numbers "2".

    Do you you know how to fix it and make them both sharp?
    PS. they both are the same font, same weight, same size, same color.

    Also I added these settings in my custom code:

    html, body {
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-kerning: auto !important;
    font-kerning: auto !important;
    -moz-osx-font-smoothing: grayscale;

    I think they are only being applied to the "red area" on the website and not on the "green area".
    Screenshot 2023-11-05 at 13.23.18.png

    Thank you

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      do u have a link

      P 1 Reply Last reply
      0
      • arminunruhA arminunruh

        do u have a link

        P Offline
        P Offline
        pavloradich
        wrote on last edited by
        #3

        @arminunruh yes sure, pavloradich.com

        1 Reply Last reply
        0
        • arminunruhA Offline
          arminunruhA Offline
          arminunruh
          Global Moderator
          wrote on last edited by
          #4

          when you center the navigation, it uses css that places the text in the middle, and the perfect middle-point is most-often a subpixel coordinate like: 800.4px

          so thats why it looks a little blurry
          you might find success with setting the position to top left and then somehow using css to center the nav in a different way.

          you can try any of those css settings:
          https://copyprogramming.com/howto/center-a-position-fixed-element

          i don't have time to work on this :/

          P 1 Reply Last reply
          0
          • arminunruhA arminunruh

            when you center the navigation, it uses css that places the text in the middle, and the perfect middle-point is most-often a subpixel coordinate like: 800.4px

            so thats why it looks a little blurry
            you might find success with setting the position to top left and then somehow using css to center the nav in a different way.

            you can try any of those css settings:
            https://copyprogramming.com/howto/center-a-position-fixed-element

            i don't have time to work on this :/

            P Offline
            P Offline
            pavloradich
            wrote on last edited by
            #5

            @arminunruh thank you. Is there still a way to center it and keep the elements sharp? Perhaps I can center it on 800 or 801 px?

            1 Reply Last reply
            0
            • arminunruhA Offline
              arminunruhA Offline
              arminunruh
              Global Moderator
              wrote on last edited by
              #6

              you could align it left and then write javascript to center it ^^
              i think i wont work on this though as its barely visible i think :O

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              I also code custom websites or custom Lay features.
              šŸ’æ Email me here: šŸ’æ
              info@laytheme.com

              Before you post:
              1. When using a WordPress Cache plugin, disable it or clear your cache.
              2. Update Lay Theme and all Lay Theme Addons
              3. Disable all Plugins
              4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

              This often solves issues you might run into

              When you post:
              1. Post a link to where the problem is
              2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
              3. If the problem is difficult to explain, post screenshots / link to a video to explain it
              Online Users
              O
              oli
              P
              piranha
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
              laytheme.com
              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Recent
              • Tags
              • Popular
              • Users
              • Search