Center nav menu in wider screens

  • This site calls for a full width, centered background image in the header and the nav menu at the bottom of the image. To retain the excellent responsive qualities of the theme, I toggle between the background image and the site logo depending on the screen width.
    That part seems okay but retaining the centered position of the menu when viewed in wider screen sizes (1200px +) doesn’t seem to work right. The nav menu is within the tc_header element which expands to fit the screen size, so the menu slides around with it. It seems impossible to position the menu outside that block.
    The question is how to keep the menu centered regardless of screen size.
    Zooming out reveals more clearly the issue:
    https://ebirder.webbrewers.com/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author presscustomizr

    (@nikeo)

    Hi,
    You seems to have fixed your issue on https://ebirder.webbrewers.com/.

    Could you share a solution if you get the chance?
    Thanks

    Thread Starter webbrewers

    (@webbrewers)

    Hi,
    My temporary fix was to insert the logo as a logo instead of a background image and wrap the header element in “old school” <center> tags. I’d still like to find a better way of doing it.
    I tried taking the header element out of the “full width” flow and centering it but couldn’t get it to work.
    In general, I wouldn’t recommend using a full width “logo” as I had to here because the header structure isn’t very flexible and is rather difficult to customize. It also made repositioning the main menu rather difficult.

    Theme Author presscustomizr

    (@nikeo)

    OK. Many thanks for this feedback.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Center nav menu in wider screens’ is closed to new replies.