I have attempted to capture screenshots to provide a clearer description of the issue, but unfortunately, my efforts have been unsuccessful.
The problem I am encountering on my website, , pertains to the main navigation bar's positioning.
Upon clicking one of the main navigation links, the navigation bar unexpectedly shifts below the logo located on the left-hand side. Is there a way for me to rectify this so that when a main navigation link is clicked, the navigation bar remains in its intended position at the top-right corner of the screen?
Below is some of the SASS code pertaining to the main navigation elements:
nav
width: initial
border: none
display: inline-block
margin-right: 0
position: absolute
right: 4em
&:active
display: block
position: static
width: 100%
li
display: block
line-height: 3.5em
text-align: center
li:first-of-type
margin-right: 1.5em
a
border: none
font-size: 1.125em
display: list-item
header a
color: #FFF
cursor: pointer
text-decoration: none
text-transform: uppercase
-webkit-transition: all 0.5s ease-in-out
-moz-transition: all 0.5s ease-in-out
-o-transition: all 0.5s ease-in-out
transition: all 0.5s ease-in-out
&:hover
color: #D8D8D8
&:focus
outline: 1px solid #F1F1F1