Breakpoint for navigation menu - Support | Kriesi.at

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
February 7, 2018 at 10:04 pm #909434

spidercreations
Participant

Apologies, but I’m having issues working out the breakpoint for the menu. Lots of items at the top-level.
Tried a few previously-suggested snippets of code, but they are not working.
Link to site in the Private Content section.
Thanks much,
Steve

February 8, 2018 at 4:29 am #909552
Nikko
Inactive Moderator
Hey spidercreations,

Can you try adding this css code in Quick CSS (located in Enfold > General Styling):
```
@media only screen and (max-width:1124px) {
  #avia-menu .menu-item {
    display: none;
  }

  #avia-menu .av-burger-menu-main {
    display: block;
  }
}
```
Hope this helps.

Best regards,
Nikko
February 8, 2018 at 1:53 pm #909761

spidercreations
Participant

Interesting. Note the code did not work when I put it into the style.css file for the theme. (Using a child theme.)
Placed in the General Styling section, it works, BUT.
At one break point the hamburger menu displays under the logo and left justified, then at another break point the header goes transparent and the menu is right justified as expected.
Can we just get the hamburger menu to stay right justified?
Thank you!
Steve

February 9, 2018 at 4:55 am #910099
Rikard
Keymaster
Hi Steve,

Please try the following CSS as well:
```
@media only screen and (min-width: 990px) and (max-width: 1124px) {
#avia-menu {
  width:auto !important;
  float:right: !important;
}
}
```
Best regards,
Rikard
February 9, 2018 at 3:21 pm #910282

spidercreations
Participant

Thank you for the reply. To clarify, I’m now using this code in the Enfold Quick CSS

‘@media only screen and (max-width:1124px) {
#avia-menu .menu-item {
display: none;
}

#avia-menu .av-burger-menu-main {
display: block;
}
}

@media only screen and (min-width: 990px) and (max-width: 1124px) {
#avia-menu {
width:auto !important;
float:right: !important;
}
}’

The same issue is happening. Note that I do have some CSS in the style.css for the child theme. It is…

‘/* For the ALB, just hide an element using this. Remember do not us . in the ALB setting */
.hidethis { display: none !important; }

/*This is a fix for the Event map being too narrow on the Event page.*/
.single-tribe_events .tribe-events-venue-map { width: 100% !important;}

/* Let’s ditch the fancy ampersand */
.special_amp {
font-family: inherit;
font-style: normal;
font-size: inherit;
line-height: inherit;
font-weight: bold;
color: inherit!important;
}’

So I’m not sure if there is a conflict? (I don’t think so.)

I generally try to use the style.css file for the child theme CSS. Should I be using Quick CSS instead? I seem to have occasional issues where changes work in Quick CSS, but are ignored in the Child Theme CSS.
Steve

February 9, 2018 at 4:04 pm #910297
Nikko
Inactive Moderator
Hi,

Just to answer this question:

Note the code did not work when I put it into the style.css file for the theme. (Using a child theme.)
Placed in the General Styling section, it works, BUT.

The reason it works in Quick CSS and not in style.css is because of browser caching or if there’s a caching plugin active which prevents the fetching of the updated (external) css and instead uses the old css cached in the browser.

Can you try to replace this css code:
```
‘@media only screen and (max-width:1124px) {
#avia-menu .menu-item {
display: none;
}

#avia-menu .av-burger-menu-main {
display: block;
}
}

@media only screen and (min-width: 990px) and (max-width: 1124px) {
#avia-menu {
width:auto !important;
float:right: !important;
}
}’
```
with:
```
@media only screen and (max-width:1124px) {
  #avia-menu .menu-item {
    display: none;
  }

  #avia-menu .av-burger-menu-main {
    display: block;
  }

  #avia-menu {
    width:auto !important;
    float:right: !important;
  }
}
```
Hope this helps :)

Best regards,
Nikko
February 9, 2018 at 4:22 pm #910305

spidercreations
Participant

Thank you, but still experiencing the same issue. Cleared browser cache and I also tried Firefox and Safari. (All Mac stuff.)
I appreciate your efforts. Maybe it has to do with the header setup or background video?

Thank you again,
Steve

February 9, 2018 at 5:52 pm #910324
Nikko
Inactive Moderator
Hi Steve,

Hmm, I don’t think it’s because of the video, can you try to replace the code I gave to this one:
```
@media only screen and (max-width:1124px) {
  #avia-menu .menu-item {
    display: none;
  }

  #avia-menu .av-burger-menu-main {
    display: block;
  }

  #avia-menu {
    width:auto !important;
    float:right: !important;
  }

  .responsive #top #wrap_all .main_menu {
    top: 0;
    height: 80px;
    left: auto;
    right: 0;
    display: block;
    position: absolute;
  }

  #header_main_alternate {
    display: none;
  }
}
```
Hopefully this should fix it. :)

Best regards,
Nikko
February 9, 2018 at 5:58 pm #910328

spidercreations
Participant

That works. Thanks again Nikko. Much appreciated.
Steve

February 9, 2018 at 6:41 pm #910357

Nikko
Inactive Moderator

Hi Steve,

You’re always welcome :) We’re happy to help. Let us know if you need further assistance or if we can close this thread :)

Best regards,
Nikko

February 9, 2018 at 7:58 pm #910383

spidercreations
Participant

You can close. Thanks!

February 10, 2018 at 7:11 am #910492

Rikard
Keymaster

Hi,

Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Breakpoint for navigation menu’ is closed to new replies.