Navbar dropdown hidden in mobile

Report · Jul 11, 2017

Hi I've created a website for my family's business. It's been successful so far apart from viewing it on a mobile device. The bootstrap navbar has links in desktop size on the right but these do not apear in mobile size, a button for a dropdown menu appears but as soon as i touch it its as if the menu is stuck behind the slideshow carousel. Any help would be much appreciated. I'm not too competent in dreamweaver. I've tried changing things in the css to position the navbar dropdown infront of the carousel. I'm assuming if it was working properly the carousel should be pushed down and the dropdown menu should appear directly below the nav bar?

<!DOCTYPE html>

<head>

<title>Andrew Thoms Building Design</title>

<!--[if lt IE 9]>

<![endif]-->

<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6,n9,n7,n4,n3:default;montserrat:n4:default.js" type="text/javascript"></script>

</head>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

<a class="navbar-brand" href="index.html">ANDREW THOMS BUILDING DESIGN</a></div>

<li><a href="projects.html" class="linktext">Projects</a></li>

<li><a href="profile.html" class="linktext">Profile</a></li>

<li><a href="contact.html" class="linktext">Contact</a></li>

</ul>

</div>

</div>

</nav>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

@charset "UTF-8";

.navbar.navbar-default {

border-radius: 0px;

background-color: #222222;

background-image: url(url);

-webkit-box-shadow: 0 0px;

box-shadow: 0 0px;

margin-bottom: 0px;

border-width: 0px;

color: #FFFFFF;

height: 0px;

}

html body .navbar-brand {

color: #FFFFFF !important;

font-family: montserrat;

font-style: normal;

font-weight: 400;

font-size: large;

}

.carouselwidth {

height: 100%;

min-width: 0px;

}

.background {

background-color: #222222;

height: 100%;

}

.image-fill {

width: 100%;

}

#wraper {

padding-left: 0px;

padding-right: 0px;

}

.linktext {

font-family: source-sans-pro;

font-style: normal;

font-weight: 200;

color: #FFFFFF !important;

font-size: large;

text-shadow: 0px 0px;

}

.bannerimage {

height: auto;

margin-top: 10px;

max-height: 40px;

max-width: 904px;

display: block;

margin-left: auto;

margin-right: auto;

}

.textwhite {

color: #FFFFFF;

}

.leftsidebar {

float: left;

max-width: 175px;

}

.carouseright {

padding-right: 0px;

padding-left: 0px;

margin-right: 0px;

color: #FFFFFF;

margin-left: 175px;

}

.left {

padding-left: 0px;

}

.thumbnailtext {

font-family: source-sans-pro;

font-style: normal;

font-weight: 300;

font-size: small;

margin-right: 0px;

margin-top: 0px;

margin-bottom: 0px;

margin-left: 0px;

color: #FFFFFF;

padding-bottom: 0px;

padding-top: 0px;

}

.thumbnailprop {

border-radius: 0px;

border-color: #222222;

padding-top: 0px;

padding-bottom: 0px;

float: left;

width: 14.2857%;

margin-bottom: 0%;

margin-top: 0%;

max-width: 129.14px;

max-height: 100px;

}

.captionprop {

padding-left: 0px;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

text-align: center;

margin-top: 0px;

margin-bottom: 0px;

}

.currentpage {

color: #FFA500;

}

#seemore {

}

.moreprojects {

font-family: source-sans-pro;

font-style: normal;

font-weight: 200;

color: #FFFFFF;

text-align: center;

font-size: 32px;

}

.flickrlink {

font-family: source-sans-pro;

font-style: normal;

font-weight: 300;

text-align: center;

font-size: 20px;

color: #FFFFFF;

padding-bottom: 40px;

}

#h3 {

font-family: source-sans-pro;

font-style: normal;

font-weight: 300;

text-align: center;

font-size: 18px;

color: #FFFFFF;

padding-top: 0px;

padding-bottom: 0px;

}

.projectstext {

padding-top: 0px;

padding-bottom: 1px;

margin-top: 5px;

margin-bottom: 5px;

}

#paragraphtext {

font-family: source-sans-pro;

font-style: normal;

font-weight: 200;

font-size: 16px;

}

#h2 {

font-family: montserrat;

font-style: normal;

font-weight: 400;

font-size: 32px;

}

.heading1 {

font-family: source-sans-pro;

font-style: normal;

font-weight: 400;

font-size: 20px;

}

.designprocess {

background-color: #FFFFFF;

padding-top: px;

margin-top: 20px;

margin-left: 5%;

width: 30%;

padding-left: 0px;

float: left;

height: 500px;

}

.aboutme {

background-color: #FFFFFF;

/* [disabled]margin-left: 0px; */

margin-top: 50px;

padding-top: 0px;

padding-bottom: 0px;

margin-bottom: 50px;

}

.aboutmeparagraph {

text-align: justify;

max-width: 1200px;

/* [disabled]margin-bottom: 50px; */

margin-left: 20px;

margin-right: 20px;

}

#h2 {

}

.aboutmeheading {

margin-left: 150px;

margin-right: 150px;

text-align: center;

margin-top: 0px;

padding-top: 10px;

padding-bottom: 10px;

}

#paragraphtext {

}

#designprocessholder {

padding-left: 0px;

}

.profileslideshow {

/* [disabled]margin-right: 5%; */

width: 45%;

}

.slideshowholder {

width: 60%;

float: right;

margin-top: 20px;

margin-right: 5%;

height: 500px;

}

.carouselimagefill {

height: 100%;

/* [disabled]min-height: 100%; */

background-color: #FFFFFF;

}

.profilecarousel {

position:relative;

max-width: 767px;

margin:0 auto;

}

.profile {

position:relative;

max-width: 960px;

margin:0 auto;

}

.profileslides {

}

#profilebackground {

background-color: #FFFFFF;

}

#profileslidebackground {

background-color: #222222;

}

.bodytext {

font-family: source-sans-pro;

font-style: normal;

font-weight: 300;

font-size: 16px;

}

.profileinfo {

width: 33.3333%;

padding-left: 20px;

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

float: left;

}

.heading3 {

font-family: montserrat;

font-style: normal;

font-weight: 400;

}

.heading2 {

font-family: montserrat;

font-style: normal;

font-weight: 400;

font-size: 36px;

}

.googlemap {

}

#map {

margin-bottom: 0px;

padding-bottom: 0px;

bottom: 0px;

height: calc(100% - 360px);

}

.contactext {

margin-left: 50%;

margin-right: 0%;

padding-right: 15px;

padding-left: 15px;

padding-bottom: 15px;

padding-top: 15px;

}

.contact {

margin-top: 0px;

padding-top: 0px;

background-color: #FFFFFF;

top: 0px;

}

.captiontext {

}

html,body{height:100%;}

.carousel,.item,.active{height:100%;}

.carousel-inner{height:100%;}

.fill{

width: 100%;

height: 100%;

background-position: center;

background-size: cover;

padding-left: 0px;

padding-right: 0px;

}

.indexslideshow {

height: calc(100% - 100px);

position: absolute;

bottom: 0px;

z-index: -1

}

.projectslideshow {

height: calc(100% - 200px);

position: absolute;

bottom: 100px;

}

.projectsnavigation {

position: absolute;

bottom: 0px;

max-height: 100px;

max-width: 915px;

margin-left: auto;

margin-right: auto;

padding-right: 0px;

padding-left: 0px;

}

.projectsthumbnailimage {

max-height: 70px;

max-width: 126px;

}

#Image17 {

}

.navcont {

max-width: 915px;

margin-left: auto;

margin-right: auto;

padding-right: 0px;

padding-left: 0px;

}

.overflow {

}

.black {

background-color: #222222;

}

.innermap {

margin-bottom: 0px;

padding-bottom: 0px;

bottom: 0px;

}

.slideshowtext {

color: #000000;

font-family: montserrat;

font-style: normal;

font-weight: 400;

text-shadow: 1px 1px 2px #B1B1B1;

}

Report · Jul 11, 2017

To start with, I think it is unethical to let mobiles download more than 5MB of images and that is just for the home page. You may like to have a look at using srcset. Google the subject or see https://www.sitepoint.com/responsive-images-part-1-using-srcset/

Not sure how to fix your problem other than adding the highlighted

<nav class="navbar navbar-default navbar-fixed-top" id="nav-inner">
<div class="container"><img src="http://www.athoms.com.au/images/Banner White.png" alt="" width="4656" height="206" class="bannerimage"/>

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="index.html">ANDREW THOMS BUILDING DESIGN</a></div>

<div class="collapse navbar-collapse" id="defaultNavbar1" style="background: black;">
<ul class="nav navbar-nav navbar-right">
<li><a href="projects.html" class="linktext">Projects</a></li>
<li><a href="profile.html" class="linktext">Profile</a></li>
<li><a href="contact.html" class="linktext">Contact</a></li>
</ul>
</div>

</div>

</nav>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Jul 11, 2017

Hi Ben,

Thank you so much! didn't know it was as simple as that, I've been changing the css and trying everything to get it appear! Its been a tough experience, html css Its not my profession I'm a building designer but have been asked to put together a website for the family business so It's been a difficult learning experience.

Thanks for the tip about the image size. Yes I should have downsized them a bit before we uploaded it I'll have a look into secret looks like it could be an interesting solution for displaying the images smaller on mobile and keeping them larger on the desktop

Cheers

Report · Jul 11, 2017

You can help me by keeping your fingers crossed that Collingwood will win all of their upcoming games.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Navbar dropdown hidden in mobile

1 Correct answer