hamburger shows below navbar-brand

Topic: hamburger shows below navbar-brand

Chris Sweeney premium asked 5 years ago

Having an issue with the hamburger when viewed on a phone. It's below the brand, even though there's loads of space on the right for it.

enter image description here

Code:

.navbar .navbar-brand {     
    background-image:url(/assetsextras/img/logos/Rotary_sm.png);
    background-repeat: no-repeat;
    display: block!important;
    padding: 11.5px 110px 0px!important;
    margin-top: 0px !important;
    margin-left: -10px!important;
    font-size: 14px!important;
    font-weight:normal!important;
    height: 40px;
    color: #001A5A;
    }

On a longer club name, I need the text to wrap, left aligned:

wrap needed Any help much appreciated.

Thanks Chris

Piotr Glejzer staff commented 5 years ago

Hi,

do you have some 'live' example with that (on your server or in our snippets)? It will be easy to help if I can test it. Thanks.

Best, Piotr

Add comment

Chris Sweeney premium answered 5 years ago

0 0 Best answer

Hi Piotr

I think I've solved it - may not be the 'proper' solution, but it works!

club site

Cheers Chris

Piotr Glejzer staff commented 5 years ago

cool, like I said :) Have a nice day!

Add comment

Chris Sweeney premium answered 5 years ago

0 0 Best answer

Hi Piotr

Thanks; I've tried putting a span class cbNme, max-width 300px in place, but it hasn't made any difference. Cheers Chris

Piotr Glejzer staff commented 5 years ago

There is a problem with your paddings and that fact you are using a long name in the anchor and put img at that anchor. It's hard to style that cause how you see, your hamburger is moving down you have paddings to your text to see img properly. I recommend you to change the layout of your navbar. Put img to some img tag and maybe position that absolute.

Add comment

Chris Sweeney premium answered 5 years ago

0 0 Best answer

<p>Hi Piotr</p>

<p><a href="https://www.rotary-ribi.org/clubs/club47.php?ClubID=263" rel="nofollow">Ashton in Makerfield with Haydock</a></p>

<pre class="prettyprint"><code>body {
    background-color:#e3f2fd;
}
.navbar a {
    color:#17458F;
}
.pull-left {
</code></pre>

<p>float: left !important;
}</p>

<p>.pull-right {
  float: right !important;
}
.messageArea img {
    margin: 5px!important;
    max-width: 100%!important;
    height: auto!important;
}
.navbar .navbar-brand { <br>
        background-image:url(/assetsextras/img/logos/Rotary_sm.png);
        background-repeat: no-repeat;
        display: block!important;
        padding: 11.5px 110px 0px!important;
        margin-top: 0px !important;
        margin-left: -10px!important;
        font-size: 14px!important;
        font-weight:normal!important;
        height: 40px;
        color: #001A5A;
        }
                @media (min-width: 750px) {
     .navbar .navbar-brand { <br>
        background-image:url(/assetsextras/img/logos/Rotary.png);
        background-repeat: no-repeat;
        display: block!important;
        padding: 22px 190px 10px!important;
        margin-top: -5px!important;
        font-size: 24px!important;
        font-weight:bold!important;
        min-height: 80px;
        color: #001A5A;
    }
                }
.custom-navbar .fa {font-size:25px}</p>

<p>@media (max-width:767px) { 
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    } <br>
}
The live pages are database driven, so try this:</p>

<p>

Rotary Club name

TotalRows > 0) { // Show if recordset not empty ?>
         
        Club of Ashton-in-Makerfield with Haydock
        </p>

<pre class="prettyprint"><code>
<ul class="navbar-nav ml-auto">
      
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="dd2" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false"><i class="fas fa-users-cog"></i> Search/Find/Contact members...</a>
    <div class="dropdown-menu dropdown-primary" aria-labelledby="dd2">
    <?php /*START*/ if ($rsMenu->getColumnVal('UsingSystem')=="1"){ ?>
      <a class="dropdown-item" href="#"><i class="fas fa-users"></i> Club members</a>
      <?php /*END*/ } ?>
      <?php /*START_memtyperestriction*/ if (($_SESSION['MemTypeID']=="1" OR $_SESSION['MemTypeID']=="2") AND $_SESSION['SiteArea']<"5"){ ?>
      <a class="dropdown-item" href="#"><i class="fas fa-user-friends"></i> The District Team</a>
      <?php } /*END_memtyperestriction*/ ?>
      <a class="dropdown-item" href="http://dms.rotarygbi.org/login" target="_blank"><i class="fas fa-database"></i> RIBI DMS search and handbooks</a>
    </div>
  </li>

</ul>
</code></pre>

<main>
</code></pre>

<p></p>

</main>

<script type="text/javascript" src="../bootstrap/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/mdb.min.js"></script>
<script>
    new WOW().init();
</script>
</code></pre>

<p>Many thanks
Chris</p>

Please insert min. 20 characters.

Hi Piotr

One with a long name:

Ashton in Makerfield with Haydock

CSS:

body {
    background-color:#e3f2fd;
}
.navbar a {
    color:#17458F;
}
.pull-left {

float: left !important; }

.pull-right { float: right !important; } .messageArea img { margin: 5px!important; max-width: 100%!important; height: auto!important; } .navbar .navbar-brand {
background-image:url(/assetsextras/img/logos/Rotary_sm.png); background-repeat: no-repeat; display: block!important; padding: 11.5px 110px 0px!important; margin-top: 0px !important; margin-left: -10px!important; font-size: 14px!important; font-weight:normal!important; height: 40px; color: #001A5A; } @media (min-width: 750px) { .navbar .navbar-brand {
background-image:url(/assetsextras/img/logos/Rotary.png); background-repeat: no-repeat; display: block!important; padding: 22px 190px 10px!important; margin-top: -5px!important; font-size: 24px!important; font-weight:bold!important; min-height: 80px; color: #001A5A; } } .custom-navbar .fa {font-size:25px}

@media (max-width:767px) { .custom-navbar .navbar-right { float: right; padding-right: 15px; }
} The live pages are database driven, so try this:

<!DOCTYPE html>

Rotary Club name TotalRows > 0) { // Show if recordset not empty ?> Club of Ashton-in-Makerfield with Haydock

        <!-- Collapse button -->

<!-- Links -->
<ul class="navbar-nav ml-auto">
      <!-- Dropdown -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="dd2" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false"><i class="fas fa-users-cog"></i> Search/Find/Contact members...</a>
    <div class="dropdown-menu dropdown-primary" aria-labelledby="dd2">
    <?php /*START*/ if ($rsMenu->getColumnVal('UsingSystem')=="1"){ ?>
      <a class="dropdown-item" href="#"><i class="fas fa-users"></i> Club members</a>
      <?php /*END*/ } ?>
      <?php /*START_memtyperestriction*/ if (($_SESSION['MemTypeID']=="1" OR $_SESSION['MemTypeID']=="2") AND $_SESSION['SiteArea']<"5"){ ?>
      <a class="dropdown-item" href="#"><i class="fas fa-user-friends"></i> The District Team</a>
      <?php } /*END_memtyperestriction*/ ?>
      <a class="dropdown-item" href="http://dms.rotarygbi.org/login" target="_blank"><i class="fas fa-database"></i> RIBI DMS search and handbooks</a>
    </div>
  </li>

</ul>

</header>
<!--Main Navigation-->

<!--Main Layout-->
<main>

  </div> <!--container-->

</main>
<!--Main Layout-->

<!--  SCRIPTS  -->
<!-- JQuery -->
<script type="text/javascript" src="../bootstrap/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/mdb.min.js"></script>
<script>
    new WOW().init();
</script>

Many thanks Chris

Piotr Glejzer staff commented 5 years ago

Did you try to change font-size to your navbar-brand to 10px for example with media queries? Something like that -->

@media (min-width: 750px) {

.navbar-brand{
   font-size: 10px;
}

}

And there is a problem with your navbar because you are using background image and text in the same anchor so it is difficult to style that. I think it will be easy if you will use some img tag to put your logo.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB jQuery
MDB Version: 4.6.1
Device: phone
Browser: android
OS: android
Provided sample code: No
Provided link: No

Chris Sweeney

Premium support 317Support score
25Questions 51Answers 0Snippets