Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #410206

    When I reduce the width of my browser screen the navigation goes behind the logo. Is there anything I can do to adjust this.

    #410230

    Hey endoradigital!

    Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px. Then add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1340px) {
    .av-main-nav > li > a { font-size: 13px; }}
    @media only screen and (max-width: 1200px) {
    .av-main-nav > li > a { padding: 0 7px; }}
    @media only screen and (max-width: 1100px) and (min-width: 990px) {
    .logo * { max-width: 80%; top: 8px; }}

    Best regards,
    Yigit

    #412654

    I made the changes. It didn’t seem to resolve the issue. The nav still goes 4 characters behind the logo and changes the font size.

    #412964

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 1040px) {
    .av-main-nav > li > a {
      padding: 0 4px;
    }}

    Regards,
    Yigit

    #413847

    It is still not quite right. Is there a way to just have the nav bar appear below the logo?

    #413946

    Hey!

    Please go to Enfold theme options > Header and change “Menu and Logo Position”

    Regards,
    Yigit

    #414028

    Sorry I mean that once it get to the width it starts overlapping then have it change so the nav is below the logo rather than to the right.

    #414462

    Hi!

    I’m sorry but it’s not possible. That will require custom modification that is beyond the scope of support. What we can do is to adjust the padding and font size when viewing on smaller screens:

    @media only screen and (max-width: 1200px) {
    .av-main-nav > li > a {
      padding: 0 4px;
      font-size: 11px;
    }}

    Cheers!
    Ismael

    #416526

    Could the new theme update possibly resolve this issue?

    #416531

    Hi!

    Without adjusting font size, spacing or decreasing the size of logo image, unfortunately it is not possible. You can try following code

    @media only screen and (max-width: 1024px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}

    to switch to mobile menu earlier

    Cheers!
    Yigit

    #416563

    Based on what I see right now, I’d prefer that the logo begin scaling down before the font size changes. Is that possible.

    #416628

    I upgraded the theme and was going through the options and checked the following box and things seems to be functioning better….

    Let logo and menu position adapt to browser window
    If checked the elements in your header will always be placed at the browser window edge, instead of matching the content width

    #416632

    Hi!

    I cannot reproduce overlapping issue on ipadpeek.com. Problem solved? :)

    Cheers!
    Yigit

    #416639

    Sorry yes that is what I was trying to say, when I checked the box the nav is functioning properly.

    #416642

    Hey!

    Great! Glad you figured it out :) Let us know if you have any other questions!

    Cheers!
    Yigit

    #578478

    For anyone interested, here’s my solution, which only targets the image.

    I was also having this problem with the absolutely positioned image overlapping the nav items when viewed at certain viewport widths. I found that the suggested solutions didn’t elegantly fulfil the desired outcome (image was distorting on header resize and padding was a fixed value, making the image unnecessarily small). To overcome this, i.e. keep the image vertically aligned, but reduce it’s overall size, I opted for setting the anchor tag container to display as a table and the anchor tag (img container) to display as a table cell, vertically align to middle, with a max-width.

    For me this solved the problem perfectly; allowing the image to still responsively resize, whilst avoiding a fixed padding size (that isn’t conducive with the responsive resizing of the header on page scroll)

    @media (min-width: 768px) and (max-width: 991px) {
      .logo {
        display: table;
      }
      .logo a {
        display: table-cell;
        vertical-align: middle;
        max-width: 200px;
      }
    }

    Merv

    #578669

    Hey!


    @mynerv
    Glad you figured it out and thank you for sharing your solution :)

    Cheers!
    Yigit

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Navigation overlapping logo’ is closed to new replies.