Hi everybody,
I am struggling to figure out the problem of my mobile menu. When in mobile, the letters of the menu points are appearing vertically. I am guessing that it might be a conflict with some of the cases, adjustments I did regarding the logo. Here is what the menu looks like (in the attachment).
Here are my custom css changes:
*/
.posted-on {display: none;}
.entry-footer {
visibility: hidden;
}
body.blog .entry-footer span.comments-link {
display: none;
}
.site-navigation-inner .nav-search {
display: none;
}
body.single span.comments-link {
display: none;
}
body .container {
max-width: 1100px;
}
@media (min-width: 992px){
.main-content-inner.col-sm-12.col-md-8{
padding-right: 22px;
}
div#secondary {
padding-left: 18px;
}
}
.navbar-default .navbar-collapse {
float: none;
margin: 0 auto;
display: table !important;
}
.widget .post-content > span {
display: none;
}
div#logo {
padding: 0;
}
div#logo {
padding-top: 1px;
}
nav.navbar.navbar-default .container {
max-width: 100%;
}
nav.navbar.navbar-default {
float: right;
max-width: 37%;
}
#masthead > .container {
float: left;
max-width: 19%;
}
nav.navbar.navbar-default {
box-shadow: none;
}
@media (min-width: 768px){
.collapse.navbar-collapse {
float: right;
}
}
h1 {
font-size: 14px;
}
h1 {
font-family: ‘Lora’, serif;
}
.wpcf7-form p {
color:#4f2a0;
margin-top:-15px;
}
h2 {
font-size: 14px;
}
h2 {
font-family: ‘Lora’, serif;
}
#page #secondary .widget {
margin-bottom: 29px;
}