I have a navigation symbol that works correctly on the home page but breaks on sub pages. I’ve tried to decipher but cannot figure out why the background shrinks behind the nav buttons. When I click to edit the symbol on one of the sub pages, the mobile icon appears to push down as if the logo is a block element rather than inline. Then it jumps back into position. I then checked other elements that are positioned near the symbol to see if a property could be pushing things. I don’t see anything that would cause the issue I’m seeing.
An update for anyone who happens to come across this post. I found the problem occurs with a navigation symbol if you happen to make a style change on an element while it’s in the “current” mode. Current meaning the change only happens while on the active page. So I had made a change to a navigation element on the home page which changed the size and only affected it on the homepage and not the others. So this is an instance where a symbol can actually change between pages.
Hi @Port_of_Folio, thanks for the info. The symbol does not change between pages, what potentially changes (depending on the styling) is the link styling/layout of a link having the Current class.
Any link that is styled, and points to the current page or visible section of a page (in the case of section linking) will have the Current class added automatically.
If the link that is current changes, and the current class styling causes a formatting issue, then it is good to make sure that there is not some styling of the current class that in actuality should be applied to all navlinks instead.