How to inhibit the effect of logo enhancement on mobile

Asked

Viewed 40 times

-3

I already thank the one who is willing to help me. First I understand the basics of html and css, and I’m setting up an online store with a template already ready, I’m just adding what I need and sometimes I do some edited code. The top menu of the site has an effect in that, when scrolling down, it shortens, and the buttons and the logo present there, too. The problem is in mobile, it happens that the menu shortens, but the logo, instead of maintaining the same size, it increases and invades the space of the other functions. Below is the image I enclosed. Remembering that on the desktop everything flows normally, the problem is only that on mobile.

À esquerda, o tamanho normal, que é o jeito que eu quero que continue ao descer a página. À direita, é como ela fica ao rolar a página devido ao efeito.

Below are all the codes in which the logo is present:

<script type="text/javascript">
    //funcoes do menu no mobile
    var htmlMenuSup = $("#menu-sup-minimalist small").html();
    $("#menu-sup-minimalist-mobile").html(htmlMenuSup);
    $(".navbar-toggle-MenuTop").click(function (e) {
        e.preventDefault();
        $("#aspnetForm").toggleClass("toggled");
    });
    </script> 

<script type="text/javascript">
    //Efeito do Menu
    $(window).scroll(function () {
        if ($(".navbar").offset().top > 50) {
            $(".top-header").slideUp("fast");
            $("#menu-top-scroll").addClass('scrolled')
        } else {
            $(".top-header").slideDown("fast");
            $("#menu-top-scroll").removeClass('scrolled')
        }
    });

    //Regras gerais do tema
    $(document).ready(function (e) {
        $("#ctl00_TdDireita").remove();
        $("#ctl00_TdEsquerda").remove();
        $(".menuSuperior ").addClass("navbar-right");
        $(".ul_master_categories ").removeClass("nav-pills");
        $(".ul_master_categories ").removeClass("nav-stacked");
        $(".menuInferior ").removeClass("navbar-nav");
        $(".ul_master_categories ").addClass("navbar-nav");
        $("#ctl00_RowCenter").removeClass("container");
        $("#ctl00_TdBody").removeClass("col-md-8");
        $("#ctl00_TdBody ").addClass("container");
        $(".home #ctl00_TdBody ").removeClass();
        $(".categories #ctl00_TdBody ").removeClass();
        $(".categories #ctl00_TdBody ").addClass("col-md-12");
        $("#ctl00_txt1").attr("placeholder", "Digite o termo para pesquisa...");
        $("#ctl00_txt1").addClass("input-lg");
    });

    //funcoes da busca
    function exibeBusca() {
        $("#form-busca").fadeIn("fast");
    }
    function fecharBusca() {
        $("#form-busca").fadeOut("fast");
    }
    $(document).keyup(function (e) {
        if (e.keyCode == 27) { // Esc
            fecharBusca();
        }
    });
</script>
    
.navbar {
      position: relative;
      min-height: 45px;
      margin-bottom: 21px;
      border: 1px solid transparent;
    }
    @media (min-width: 768px) {
      .navbar {
        border-radius: 0;
      }
    }
    @media (min-width: 768px) {
      .navbar-header {
        float: left;
      }
    }
    .navbar-collapse {
      overflow-x: visible;
      padding-right: 15px;
      padding-left: 15px;
      border-top: 1px solid transparent;
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      -webkit-overflow-scrolling: touch;
    }
    .navbar-collapse.in {
      overflow-y: auto;
    }
    @media (min-width: 768px) {
      .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
      }
      .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
      }
      .navbar-collapse.in {
        overflow-y: visible;
      }
      .navbar-fixed-top .navbar-collapse,
      .navbar-static-top .navbar-collapse,
      .navbar-fixed-bottom .navbar-collapse {
        padding-left: 0;
        padding-right: 0;
      }
    }
    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
      max-height: 340px;
    }
    @media (max-device-width: 480px) and (orientation: landscape) {
      .navbar-fixed-top .navbar-collapse,
      .navbar-fixed-bottom .navbar-collapse {
        max-height: 200px;
      }
    }
    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
      margin-right: -15px;
      margin-left: -15px;
    }
    @media (min-width: 768px) {
      .container > .navbar-header,
      .container-fluid > .navbar-header,
      .container > .navbar-collapse,
      .container-fluid > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
      }
    }
    .navbar-static-top {
      z-index: 1000;
      border-width: 0 0 1px;
    }
    @media (min-width: 768px) {
      .navbar-static-top {
        border-radius: 0;
      }
    }
    .navbar-fixed-top,
    .navbar-fixed-bottom {
      position: fixed;
      right: 0;
      left: 0;
      z-index: 1030;
    }
    @media (min-width: 768px) {
      .navbar-fixed-top,
      .navbar-fixed-bottom {
        border-radius: 0;
      }
    }
    .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
    }
    .navbar-fixed-bottom {
      bottom: 0;
      margin-bottom: 0;
      border-width: 1px 0 0;
    }
   .navbar-brand {
        float: left;
        padding:0;
        font-size: 19px;
        line-height: 21px;
        max-width: 200px;
        height: inherit;
    }
    .navbar-brand:hover,
    .navbar-brand:focus {
      text-decoration: none;
    }
    .navbar-brand > img {
      display: block;
    }
    @media (min-width: 768px) {
      .navbar > .container .navbar-brand,
      .navbar > .container-fluid .navbar-brand {
        margin-left: -15px;
      }
    }
    .navbar-toggle {
      position: relative;
      float: right;
      margin-right: 15px;
      padding: 9px 10px;
      margin-top: 5.5px;
      margin-bottom: 5.5px;
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 0;
    }
    .navbar-toggle:focus {
      outline: 0;
    }
    .navbar-toggle .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
    }
    .navbar-toggle .icon-bar + .icon-bar {
      margin-top: 4px;
    }
    @media (min-width: 768px) {
      .navbar-toggle {
        display: none;
      }
    }
    .navbar-nav {
      margin: 6px -15px;
    }
    .navbar-nav > li > a {
      padding-top: 10px;
      padding-bottom: 10px;
      line-height: 21px;
    }
    @media (max-width: 767px) {
      .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
      }
      .navbar-nav .open .dropdown-menu > li > a,
      .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px;
      }
      .navbar-nav .open .dropdown-menu > li > a {
        line-height: 21px;
      }
      .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-nav .open .dropdown-menu > li > a:focus {
        background-image: none;
      }
    }
    @media (min-width: 768px) {
      .navbar-nav {
        float: left;
        margin: 0;
      }
      .navbar-nav > li {
        float: left;
      }
      .navbar-nav > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
      }
    }
    .navbar-form {
      margin-left: -15px;
      margin-right: -15px;
      padding: 10px 15px;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
      margin-top: 3px;
      margin-bottom: 3px;
    }
    @media (min-width: 768px) {
      .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
      }
      .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
      }
      .navbar-form .form-control-static {
        display: inline-block;
      }
      .navbar-form .input-group {
        display: inline-table;
        vertical-align: middle;
      }
      .navbar-form .input-group .input-group-addon,
      .navbar-form .input-group .input-group-btn,
      .navbar-form .input-group .form-control {
        width: auto;
      }
      .navbar-form .input-group > .form-control {
        width: 100%;
      }
      .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle;
      }
      .navbar-form .radio,
      .navbar-form .checkbox {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
      }
      .navbar-form .radio label,
      .navbar-form .checkbox label {
        padding-left: 0;
      }
      .navbar-form .radio input[type="radio"],
      .navbar-form .checkbox input[type="checkbox"] {
        position: relative;
        margin-left: 0;
      }
      .navbar-form .has-feedback .form-control-feedback {
        top: 0;
      }
    }
    @media (max-width: 767px) {
      .navbar-form .form-group {
        margin-bottom: 5px;
      }
      .navbar-form .form-group:last-child {
        margin-bottom: 0;
      }
    }
    @media (min-width: 768px) {
      .navbar-form {
        width: auto;
        border: 0;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
        padding-bottom: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
      }
    }
    .navbar-nav > li > .dropdown-menu {
      margin-top: 0;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
    }
    .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
      margin-bottom: 0;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .navbar-btn {
      margin-top: 3px;
      margin-bottom: 3px;
    }
    .navbar-btn.btn-sm {
      margin-top: 4.5px;
      margin-bottom: 4.5px;
    }
    .navbar-btn.btn-xs {
      margin-top: 11.5px;
      margin-bottom: 11.5px;
    }
    .navbar-text {
      margin-top: 12px;
      margin-bottom: 12px;
    }
    @media (min-width: 768px) {
      .navbar-text {
        float: left;
        margin-left: 15px;
        margin-right: 15px;
      }
    }
    @media (min-width: 768px) {
      .navbar-left {
        float: left !important;
      }
      .navbar-right {
        float: right !important;
        margin-right: -15px;
      }
      .navbar-right ~ .navbar-right {
        margin-right: 0;
      }
    }
    .navbar-default {
      background-color: #333333;
      border-color: #222222;
    }
    .navbar-default .navbar-brand {
      color: #000;
    }
    .navbar-default {
        background-color: #fff;
        border-bottom: 1px solid #ececec!important;
    }
    .navbar-default .navbar-text {
      color: #ffffff;
    }
    .navbar-default .navbar-nav > li > a {
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        color: #a1c037 !important;
        background-color: transparent !important;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
      color: [CorLinks];
      background-color: [CorPrincipalTema];
    }
    .navbar-default .navbar-nav > .disabled > a,
    .navbar-default .navbar-nav > .disabled > a:hover,
    .navbar-default .navbar-nav > .disabled > a:focus {
      color: #cccccc;
      background-color: transparent;
    }
    .navbar-default .navbar-toggle {
      border-color: transparent;
    }
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
      background-color: transparent;
    }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: #ffffff;
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
      border-color: #222222;
    }
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
      background-color: #272727;
      color: #ffffff;
    }

    @media (max-width: 767px) {
      .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: #272727;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #272727;
      }
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #cccccc;
        background-color: transparent;
      }
    }
    .navbar-default .navbar-link {
      color: #ffffff;
    }
    .navbar-default .navbar-link:hover {
      color: #ffffff;
    }
    .navbar-default .btn-link {
      color: #ffffff;
    }
    .navbar-default .btn-link:hover,
    .navbar-default .btn-link:focus {
      color: #ffffff;
    }
    .navbar-default .btn-link[disabled]:hover,
    fieldset[disabled] .navbar-default .btn-link:hover,
    .navbar-default .btn-link[disabled]:focus,
    fieldset[disabled] .navbar-default .btn-link:focus {
      color: #cccccc;
    }
    .navbar-inverse {
      background-color: [CorBotaoPrimario];
      border-color: [CorBotaoPrimarioHover];
    }
    .navbar-inverse .navbar-brand {
      color: #ffffff;
    }
    .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-brand:focus {
      color: #ffffff;
      background-color: transparent;
    }
    .navbar-inverse .navbar-text {
      color: #ffffff;
    }
    .navbar-inverse .navbar-nav > li > a {
      color: #ffffff;
    }
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
      color: #ffffff;
      background-color: [CorBotaoPrimarioHover];
    }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
      color: #ffffff;
      background-color: [CorBotaoPrimarioHover];
    }
    .navbar-inverse .navbar-nav > .disabled > a,
    .navbar-inverse .navbar-nav > .disabled > a:hover,
    .navbar-inverse .navbar-nav > .disabled > a:focus {
      color: #444444;
      background-color: transparent;
    }
    .navbar-inverse .navbar-toggle {
      border-color: transparent;
    }
    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
      background-color: transparent;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
      background-color: #ffffff;
    }
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
      border-color: #007196;
    }
    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus {
      background-color: [CorBotaoPrimarioHover];
      color: #ffffff;
    }
    @media (max-width: 767px) {
      .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: [CorBotaoPrimarioHover];
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: [CorBotaoPrimarioHover];
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: [CorBotaoPrimarioHover];
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: [CorBotaoPrimarioHover];
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
      .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
      }
    }
    .navbar-inverse .navbar-link {
      color: #ffffff;
    }
    .navbar-inverse .navbar-link:hover {
      color: #ffffff;
    }
    .navbar-inverse .btn-link {
      color: #ffffff;
    }
    .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link:focus {
      color: #ffffff;
    }
    .navbar-inverse .btn-link[disabled]:hover,
    fieldset[disabled] .navbar-inverse .btn-link:hover,
    .navbar-inverse .btn-link[disabled]:focus,
    fieldset[disabled] .navbar-inverse .btn-link:focus {
      color: #444444;
    }
<div class="no-padding" id="menu-top-scroll">
        <div class="col-md-4 col-sm-3 col-xs-6">
            <div class="navbar-header m-t-20 m-b-20">
              <a class="navbar-brand" href="/">[logo]</a>
            </div>
        </div>
</div>

javascript html css mobile logo

  • Already tried to put a width in % in the logo?

  • Yes yes, I’ve tried. Both by modifying the max-width, and by putting a new and changing the values.

  • The site is published, you have a link?

  • Yep. https://grmed.001shop.com.br/ It is still under construction.

1 answer

-2

it would be nice if you create a div for the desktop logo and another for the mobile logo, this will keep your code organized and solve your ploblema.

each one will receive a size, in the case of the desk you keep the current size and in the mobile, you style it to fit in the mobile, so the image will not leak when the screen is smaller

  • Thanks Fernanda! I’ll try this alternative

Browser other questions tagged javascript html css mobile logo

You are not signed in. Login or sign up in order to post.