Answer the question
In order to leave comments, you need to log in
Why doesn't navbar expand expand on mobile browser width?
There is a website:
https://photobookingsystem.com/
The front is made on Boobstrap. I can’t understand what is wrong in the code, why the click on the stripes does not work and does not expand the navbar?
Pasted a ready-made navbar from the Bootstrap documentation and found the same behavior. That is, the navbar is not revealed by clicking on the exactly correct navbar code. So the reason is somewhere else.
%nav.navbar.navbar-expand-lg.bg-primary
.container
.navbar-translate
%a.navbar-brand{"data-placement" => "bottom", :href => "/", :rel => "tooltip", :title => "Photo Booking System"}
Photo Booking System
%button.navbar-toggler.navbar-toggler{"aria-controls" => "navigation-index", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#navigation-index", "data-toggle" => "collapse", :type => "button"}
%span.navbar-toggler-bar.bar1
%span.navbar-toggler-bar.bar2
%span.navbar-toggler-bar.bar3
#navigation-index.collapse.navbar-collapse{"data-nav-image" => image_path('blurred-image-1.jpg')}
%ul.navbar-nav.ml-auto
%li.nav-item
= link_to photo_sessions_path, class: 'nav-link' do
%p= t('nav_photo_sessions', default: 'Buy Photo Session')
%li.nav-item
= link_to calculator_path, class: 'nav-link' do
%p= t('nav_session_price_calc', default: 'Sell Photo Sessions')
%li.nav-item
= link_to photographers_path, class: 'nav-link' do
%p Photographers
%ul.nav.navbar-nav.navbar-right
%li.nav-item
= link_to 'About', page_path('about'), class: 'nav-link'
- if user_signed_in?
%li.nav-item
= link_to profile_dashboard_path, class: 'nav-link' do
%i.now-ui-icons.business_badge
%p= t('nav_cabinet', default: 'Cabinet')
- else
%li.nav-item
= link_to new_user_registration_path, class: 'nav-link' do
%i.fas.fa-user-plus
%p= t('nav_sign_up', default: 'Sign Up')
%li.nav-item
= link_to new_user_session_path, class: 'nav-link' do
%i.fas.fa-user
%p= t('nav_sign_in', default: 'Sign In')
%li.nav-item
%a.nav-link{"data-placement" => "bottom", :href => "https://twitter.com/photo_bookings", :rel => "tooltip", :target => "_blank", :title => "Follow us on Twitter"}
%i.fab.fa-twitter
%p.d-lg-none.d-xl-none Twitter
%li.nav-item
%a.nav-link{"data-placement" => "bottom", :href => "https://www.facebook.com/photobookingsystem/", :rel => "tooltip", :target => "_blank", :title => "Like us on Facebook"}
%i.fab.fa-facebook-square
%p.d-lg-none.d-xl-none Facebook
%li.nav-item
%a.nav-link{"data-placement" => "bottom", :href => "http://instagram.com/photobookingsystem/", :rel => "tooltip", :target => "_blank", :title => "Follow us on Instagram"}
%i.fab.fa-instagram
%p.d-lg-none.d-xl-none Instagram
%li.nav-item.dropdown
= link_to_unless(I18n.locale == :ru, 'Русский', { locale: :ru }, { class: 'nav-link' }) do |name|
%a.nav-link.disabled= name
%li.nav-item
= link_to_unless(I18n.locale == :en || params[:locale].nil?, 'English', { locale: :en }, { class: 'nav-link' }) do |name|
%a.nav-link.disabled= name
Answer the question
In order to leave comments, you need to log in
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question