menu positioning help

  • I have added the logo to the page, but it then pushes the menu to the top of the header. I am able to get the menu where I want it using 

    #header-right {
  position: absolute;
  bottom: 0;
  left: 25%;
}

    But then it messes with how the menu displays on mobile/smaller screens. Is there a way for me to get the menu where I want it while allowing it to stay responsive?

    https://www.stephaniechavez.com/

Viewing 3 replies - 1 through 3 (of 3 total)

  • Menu seems to be responsive. Is your issue fixed?

    Ok, you can do it using media queries to play around with the menu on different devices.

    The first bit of code makes the text slightly smaller on devices smaller than 820px when your menu starts to play up. The text change helps fit the menu in.

    The second bit removes the changes you made when the device reaches the mobile navigation width.

    Insert the code below, let us know how it looks and then come back if it does not work.

    Remember to place the code in your “custom css” area or in your style.css file if using a child theme.

    @media screen and (max-width: 820px) {
  ul.nav li a {
  font-size: 16px;
}
}

@media screen and (min-width: 768px) {
  #header-right {
  bottom: 0;
  position: absolute;
  right: 1%;
}
}
    Thread Starter blankbeard

    (@blankbeard)

    Thank you so much innuvo! That worked perfectly. I want to learn more about this as I am having problems with the transition from full size to mobile size on other sites I am working on. Any suggestions on places to spruce up on my knowledge on that?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘menu positioning help’ is closed to new replies.