StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Funny nav menu interior image

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Funny nav menu interior image

This topic is: not resolved

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 24, 2016 at 6:39 pm #192002
    Angelique
    Member

    I have the Modern Studio Pro theme.

    This can only be seen in Chrome or Safari. It looks normal in Firefox. I haven't checked IE yet.

    When viewed in Chrome or Safari, my primary navigation bar (the one to the left of the logo, .nav-primary,) has an extra interior color that shows. This doesn't happen in the secondary navigation bar (to the right of the logo, .nav-secondary).

    I'm not sure where this is coming from. Attached is a screenshot.

    Navbar Screenshot

    http://itsolutionsbycmit.com
    August 25, 2016 at 6:42 am #192023
    Victor Font
    Moderator

    It looks like it might be coming from ::selection at line 187 in style.css.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 25, 2016 at 9:27 am #192034
    Angelique
    Member

    But don't selections only show up when you actually select them?

    August 25, 2016 at 10:08 am #192036
    Victor Font
    Moderator

    In both Chrome and Safari, I removed the selection with the inspect element tool and the additional color band went away. These two browsers use a different rendering engine than the other browsers. They work differently.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 25, 2016 at 10:29 am #192037
    Angelique
    Member

    I just tried it in real life; removing those didn't do anything. What's weird about that extra band (and about "News & Advice" wrapping on to two lines) is that in Chrome and Safari it happens when the page first loads, and then they go away when you move your cursor around.

    I thought the problem might have been caused by trying to make the navigation bar full width, but after I returned the bar to 100%, the problem still persists. (Did you see my reply to my other post about the nav bar, saying that it was running off the right side of the page?)

    I'm wondering if there are some problems because some genesis code gets repeated by my theme under @media only screen and (min-width: 930px) (this is where my theme puts most of its special formatting.)

    August 25, 2016 at 10:40 am #192038
    Angelique
    Member

    I just used Safari's responsive design view, and it clearly shows a problem with the views for Safari, Chrome and IE. This screenshot is for the IE view. I just can't find any code that is specifically targeting either sidebar!

    shallow primary nav bar screenshot

    August 25, 2016 at 11:51 am #192040
    Angelique
    Member

    Okay, fixed! The problem was caused by the padding I had added to the navigation menu items. That wasn't a smart thing to do; I should have increased the size of the menu area, not the padding around the items. I was probably fooling around and forgot to change it back.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.