-
AuthorPosts
-
October 3, 2016 at 2:05 pm #694611
Hi guys,
I´m facing some issues with the header and the socket on mobile and wasn´t able to find the answers to fix my problems in the other threads.
1.) I would like to reduce the height of the dark grey header bar above logo and main menu to a minimum without sacrificing usability
2.) The search bar / icon doesn´t show on mobile. How can I add it left of the main menu or anywhere visible?
3.) The footer menu isn´t centered (Über uns, Presse etc.). How can I fix that?I´m currently using this code:
/*Social Icons Menu*/#top .social_bookmarks li a {
width: 55px;
line-height: 42px;
margin-top: -5px;
margin-bottom: 100px;
margin-right: 0px;
margin-left: 0px;
padding: 0;
min-height: 40px;
font-size: 20px;
color: #ffffff;
}.av-social-link-mail a:hover {
background-color: #ff8d3f !important;
}#footer .widget {
text-align: center;
}#socket .copyright {
text-align: center;
display: block;
width: auto;
}#socket .copyright { width: 100%; text-align: center; }
#socket .sub_menu_socket { margin-top: -60px;
margin-right: 400px;
}#socket .copyright { display: none; }
.post-meta-infos, .news-time{
display: none;
}
.blog span.post-meta-infos * {
display: none;
}
.blog span.post-meta-infos time{
display: block;
}
.news-time {
display: none;
}
.entry-content .post-meta-infos {
display: none;
}span.av-masonry-date {
display: none;
}#top .av-main-nav { font-family: Oswald; }
.logo {
margin-left: -20px;
}/*Responsiveness*/
@media only screen and (max-width: 767px) {
.responsive #socket .sub_menu_socket {
display: block !important;
width: 100%; text-align: center; position: relative; top: 15px;
}}@media only screen and (max-width: 480px) {
#socket .sub_menu_socket li {
line-height: 1.5em;
}#socket .sub_menu_socket li:first-child {
border: none;
padding-left: 40;
}.responsive #socket .sub_menu_socket {
position: absolute;
margin-left: 0;
}.responsive #socket .container {
min-height: 80px;
}#socket .copyright {
position: absolute;
left: 0;
bottom: 0;
}}/*Datum etc. aus Beitrag entfernen*/
span.post-meta-infos {
display: none;
}/*Datum aus Suchergebnissen entfernen*/
.search-results .entry-format,
.search-results .posted-on,
.search-results .comments-link,
.search-results .edit-link {
display:none;
}Could you help me with any quick css or other tweak that I can use to achieve this?
Thanks a lot.
Best regards
MischkaOctober 3, 2016 at 4:08 pm #694692Hey mischka_b,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px){ .responsive #top #header_meta .social_bookmarks li a { color: #ffffff; } #header_meta, #top #wrap_all .social_bookmarks li { max-height: 30px; } #socket .sub_menu_socket li { float: none; } }
Best regards,
JordanOctober 16, 2016 at 4:52 pm #699647Hi Jordan,
thanks a lot for your help! It all works now except for the search icon that does not show on mobile yet. Any idea how I can add it left of the main menu or anywhere visible?
Cheers
MischkaOctober 18, 2016 at 9:42 pm #700887 -
AuthorPosts
- You must be logged in to reply to this topic.