Logo

Hi Movin,

Loving the theme!!

I have one small issue though.

My logo seems to be coming up wide on the mobile sites so wide that i cannot see the menu bar (Ipad and Iphone) can you please advise me on how I could maybe alter this.

Site: www.obgi.org

Thanks in advance.

THIS IS WHAT MY NAVIGATION LOOKS LIKE IN EDITOR.

.nav-container {
-webkit-backface-visibility: hidden;
max-width: 100%;
}
nav {
background: #fff;
-webkit-backface-visibility: hidden;
max-width: 100%;
}
nav ul {
margin-bottom: 0;
}
.module {
display: inline-block;
padding: 0 32px;
}
.module-group {
display: inline-block;
}
.module.left {
float: left;
}
.module.right, .module-group.right {
float: right;
}
nav .btn, .nav-bar .btn {
margin: 0;
height: auto;
}
.nav-bar {
height: 70px;
max-height: 70px;
line-height: 55px;
}
nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav-bar .module, .nav-bar .module-group {
height: 60px;
}
.nav-bar a {
display: inline-block;
height: 55px;
}
.logo {
max-height: 100%;
}
.menu > li.dropdown {
padding-right: 0px;
}
.dropdown:after {
position: absolute;
top: 0;
right: 0;
font-size: 11px;
content: “\f107”;
font-family: ‘fontawesome’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
.menu {
width: 100%;
height: 100px;
font-family: “Raleway”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
}
.menu li a {
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
color: #0e1015;
opacity: 0.5;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
max-width: 100%;
white-space: normal;
}
.menu li a:hover {
opacity: 1 !important;
}
.menu > li {
margin-right: 32px;
float: left;
position: relative;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
opacity: 1;
}
.menu > li:last-child {
margin-right: 0;
}
.menu > li ul {
left: 0;
width: 200px;
padding: 0;
background: #0e1015;
position: absolute;
z-index: 99;
top: 100%;
opacity: 0;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
visibility: hidden;
margin-top: -1px;
}
.menu > li > ul > li {
position: relative;
line-height: 24px;
width: 100%;
vertical-align: top;
}
.menu > li > ul > .dropdown:after {
color: #0e1015;
top: 3px;
right: 24px;
content: “\f105”;
}
.menu > li > ul li a {
color: #fff;
height: auto;
padding: 6px 24px;
}
.menu > li > ul > li > ul {
left: 50%;
top: 0;
}
.menu > li:hover > ul {
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
}
.menu > li > ul > li:hover > ul {
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
}
nav.outOfSight {
transform: translate3d(0, -200px, 0);
-webkit-transform: translate3d(0, -200px, 0);
-moz-transform: translate3d(0, -200px, 0);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
nav.scrolled {
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
}
nav.fixed.scrolled {
visibility: visible;
opacity: 1;
}
nav.fixed {
top: 0;
width: 100%;
z-index: 999;
left: 0;
right: 0;
}
nav.fixed {
position: fixed;
visibility: hidden;
opacity: 0;
}
nav.fixed.scrolled {
visibility: visible;
opacity: 1;
}
.dropdown-menu {
border-radius: 0;
}
.nav-open {
max-height: 10000px !important;
height: auto !important;
}
.nav-open .navbar-collapse, .nav-open #menu {
display: block;
}
.module.widget-handle {
padding: 0 24px;
cursor: pointer;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 0;
}
@media all and (max-width: 1100px) {
.module.widget-handle {
padding: 0 16px;
}
}
@media all and (max-width: 991px) {
.toggle-sub > ul {
display: block !important;
}
}
.module.widget-handle i {
font-size: 20px;
line-height: 53px;
opacity: 0.5;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.module.widget-handle:hover i {
opacity: 1;
}
.widget-handle .function {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
cursor: default;
width: 200px;
background: #0e1015;
position: absolute;
z-index: 99;
opacity: 0;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
visibility: hidden;
margin-top: -2px;
right: 0;
}
.module.widget-handle:hover .function {
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
}
.module.widget-handle .title {
font-family: “Raleway”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
display: none;
opacity: .5;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.module.widget-handle .title:hover {
opacity: 1;
}

/* Search bar */

.search-form {
padding: 8px;
display: inline-block;
width: 100%;
line-height: 50px;
}
.widget .search-form {
padding: 0;
}
.widget .search-form .searchsubmit {
display: none;
}
.widget-handle .search-form input[type=“text”] {
font-size: 16px;
float: left;
width: 70%;
}
.search-form input[type=“text”] {
font-size: 14px;
margin: 0;
}
.widget-handle .function {
background: #fff;
width: 300px;
}
.btn.searchsubmit {
min-width: 17%;
padding: 0;
width: 27%;
height: 50px;
line-height: 48px;
margin: -2px 0 0 8px;
}
.btn.searchsubmit:hover {
background-color: #5d47d7;
color: #fff;
}

/*Search Page */

.search #primary, .no-results {
padding-top: 0
}
.no-results {
border-bottom: 0;
}
.no-results form.search-form {
max-width: 500px;
padding: 0;
width: 100%;
}
.no-results form #s {
max-width: 292px;
width: 71%;
}
.no-results form .searchsubmit {
margin: 0;
}
.menu > li ul {
background: #fff;
}
.menu > li ul {
background: #fff;
}
.menu > li > ul li a {
color: #292929;
width: 100%;
}
.menu > li > ul li a:hover {
background: #745cf9;
color: #fff;
}
.menu > li > ul > .dropdown:hover:after {
color: #fff;
}
@media all and (max-width: 1120px) {
.menu > li {
margin-right: 24px;
}
}
@media all and (max-width: 991px) {
.nav-bar, .nav-bar .module-group, .nav-bar .module {
height: auto;
overflow: hidden;
}
.nav-bar .module {
padding: 0 16px;
}
.nav-bar .module-group {
width: 100%;
padding: 16px 0;
}
.nav-bar .module-group .module {
display: block;
float: none;
width: 100%;
}
.menu {
height: auto;
}
.menu a {
height: auto;
line-height: 24px;
padding: 4px 0;
}
.menu li {
line-height: 24px;
float: none;
display: block;
width: 100%;
max-width: 100%;
}
.menu > li ul {
position: relative;
width: 100%;
opacity: 1;
visibility: visible;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
left: 0;
}
.menu > li > ul {
position: relative;
opacity: 1;
visibility: visible;
display: none;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
}
.menu > li > ul > .dropdown:after {
content: “\f107”;
}
.menu > li > ul > li > ul {
left: 0;
display: none;
padding: 0;
}
.menu > li > ul li a {
padding: 4px 16px;
}
.dropdown .dropdown li {
padding-left: 18px;
}
.dropdown {
padding-right: 0;
}
.module.widget-handle {
border-left: none;
line-height: 40px;
min-height: 40px;
}
.module.widget-handle i {
line-height: 40px;
}
.module.widget-handle .title {
display: inline-block;
position: relative;
bottom: 3px;
margin-left: 8px;
}
.widget-handle .function {
width: 100%;
max-width: 300px;
position: relative;
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
margin-top: 0;
display: none;
box-shadow: none !important;
}
.toggle-search .function {
display: block;
}
.search-widget-handle .search {
padding: 0 15px;
}
.mobile-toggle i {
line-height: 53px !important;
}
}

Hi @oraine,

I hope you are well today and thanks for posting here.

Please do not share this much large code in the topic instead share it by adding it in the file.

I visited your shared site and found that you are not using Shapely theme on the site.

Please advise.

Kind Regards,
Movin