Monitor Reply

Support

Mobile nav bar

Permalink Browser Info Environment May 08, 2018 at 8:17 PM

Hi,

I have rebuilt the site with the latest C5, and I have noticed that the navbar in mobile is not a drop down menue like it use to be, could you tell me if it has a special template or something to improve its look?

You can test the site athttp://www.beautebook.com

Thank you!
V.

Type:	Pre-Sale
Status:	In Progress

jordif replied on May 11, 2018 at 9:11 am Permalink Reply

Hi!

The navbar should collpase as usual in newer versions. Have you added the Slides Nav block to the Slides Nav area?

Jordi

byvictoria replied on May 11, 2018 at 4:00 pm Permalink Reply

Hi Jordi,

I am using the navbar block, with an html block in Slide one with a custom
code you did for me, so the navbar would be in slide two and stick to the
browsers top when scrowling down.
This is the code:

<script>
$( window ).load(function() {
if (!$('html').hasClass('editing')) {
$('#slide2 .site-header').affix({
offset: {
top: function () {
if ( $('html').hasClass('ccm-toolbar-visible') ) {
return $('#slide2').offset().top - 59
} else {
return $('#slide2').offset().top - 10
}
}
}
});
}

Viewing 15 lines of 40 lines. View entire code block.

 
<script>
$( window ).load(function() {
if (!$('html').hasClass('editing')) {
$('#slide2 .site-header').affix({
offset: {
top: function () {
if ( $('html').hasClass('ccm-toolbar-visible') ) {
return $('#slide2').offset().top - 59
} else {
return $('#slide2').offset().top - 10
}
}
}
});
}
});
</script>
<style>
.site-header.navbar-fixed-top {
display:none;
}
#slide2 .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 800;
}
.editing #slide2 .site-header {
position: static !important;
}
#slide2 .site-header.affix {
position:fixed;
top: 0px;
}
.ccm-toolbar-visible #slide2 .site-header.affix {
position:fixed;
top: 48px;
}
</style>

Is there a class or anything I missing for the menu to become a square drop
down menu in mobile?

Thank you as always Jordi...

V.

jordif replied on May 13, 2018 at 7:19 pm Permalink Reply

I see, so this is very customized, that's why the dropdown is not working by default.

You can try this (not tested):

1) Add the following Custom Classes to the Auto-Nav block:

collapse
navbar-collapse

2) Add an HTML block next to the Auto-Nav block with the following code (this is the "burger" button that shows up on mobile):

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" style="border-color: #777; z-index: 1200">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar" style="background-color:#333"></span>
   <span class="icon-bar" style="background-color:#333"></span>
   <span class="icon-bar" style="background-color:#333"></span>
</button>

Hope this helps!

Jordi

byvictoria replied on May 14, 2018 at 2:50 am Permalink Reply

Hi Jordi!

Thanks a lot... It works almost flawless, the only detail is that the
burger button doesn´t align with the logo in the same row, is there a class
I could add to the logo image block that tells him to shrink until he
leaves room for the burger?

Anyway, it is only a nice to have feature, my site is functional without a
mobile menu.

Thanks again...

V.

jordif replied on May 14, 2018 at 8:05 am Permalink Reply

Oh, i see! Can you try placing the HTML block with the burger button right before the logo?

byvictoria replied on May 16, 2018 at 8:25 pm Permalink Reply

Thank you Jordif!

Long Story Short

Support

Mobile nav bar

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post