Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 11, 2015 at 11:53 pm #410206
    endoradigital

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

    March 12, 2015 at 1:09 am #410230
    Yigit

    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

    March 16, 2015 at 11:22 pm #412654
    endoradigital

    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.

    March 17, 2015 at 3:00 pm #412964
    Yigit

    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

    March 18, 2015 at 6:11 pm #413847
    endoradigital

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

    March 18, 2015 at 8:30 pm #413946
    Yigit

    Hey!

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

    Regards,
    Yigit

    March 18, 2015 at 10:46 pm #414028
    endoradigital

    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.

    March 19, 2015 at 3:09 pm #414462
    Ismael

    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

    March 23, 2015 at 6:03 pm #416526
    endoradigital

    Could the new theme update possibly resolve this issue?

    March 23, 2015 at 6:07 pm #416531
    Yigit

    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

    March 23, 2015 at 6:36 pm #416563
    endoradigital

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

    • This reply was modified 9 years, 8 months ago by endoradigital.
    March 23, 2015 at 7:54 pm #416628
    endoradigital

    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

    March 23, 2015 at 8:00 pm #416632
    Yigit

    Hi!

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

    Cheers!
    Yigit

    March 23, 2015 at 8:08 pm #416639
    endoradigital

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

    March 23, 2015 at 8:10 pm #416642
    Yigit

    Hey!

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

    Cheers!
    Yigit

    February 5, 2016 at 1:28 pm #578478
    mynerv

    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

    February 5, 2016 at 6:33 pm #578669
    Yigit

    Hey!


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

    Cheers!
    Yigit

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