How can I block the minimized header with menu only in phone view?
-
Hello everybody,
How can I block the minimized header with menu only in phone view?
Thks!!
-
Link to your site?
You need @media code.
Need a bit more clarification as don’t fully understand what you want.
My site is viejomusical.com
When I entered the room from my phone I see the big header image like this and when I scroll down the header look like this picture.
What I mean is that if I enter from my mobile on any page of my site look directly reduced menu like the second way.
Try this:
@media all and (max-width: 480px) { .sticky-disabled .tc-header { display: none; } .sticky-enabled .tc-header { display: block; } }
Just copying the code as it is in my css?
The {} are correct? I see four ‘}’ and two ‘{‘
It′s doesn′t work. When I copy/paste de code you gave me the screen show like this.
Can you help me, please?
@d4z pointed me at a similar post which works for me:
@media (max-width: 979px){ .tc-header { border-bottom: none; } header.tc-header { min-height: 40px; } .tc-header .brand{ float: left; width: 80%; text-align: left; padding-left: 10px; position: relative; z-index: 2; } header.tc-header .outside, header.tc-header .social-block { display: none; } /* shrink header img by default*/ .tc-header .site-logo img { height: 30px!important; width: auto!important; } .tc-header .brand h1, .tc-header .brand a{ margin: 10px 0px; } .tc-header .brand .site-title { font-size: 0.6em; line-height: 1.2em; } .tc-header .navbar-wrapper { float: none; position: relative; z-index: 1; } .tc-header .navbar .navbar-inner{ margin: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: none; } .tc-header .navbar .btn-navbar { margin: 9px 0px; } .tc-header .nav-collapse{ /* default fallback */ background: rgb(255, 255, 255) transparent; /* nice browsers */ background: rgba(255, 255, 255, 0.9); /* IE 6/7 */ filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; } } @media (max-width:480px){ .tc-header .brand .site-title{ font-size: 0.5em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tc-header .brand h1, .tc-header .brand a{ margin: 10px 0px 0px; } }
Slightly improved version:
@media (max-width: 979px){ .tc-header { border-bottom: none; } header.tc-header { min-height: 40px; } .tc-header .brand{ float: left; width: 80%; text-align: left; padding-left: 10px; position: relative; z-index: 2; } header.tc-header .outside, header.tc-header .social-block { display: none; } /* shrink header img by default*/ .tc-header .site-logo img { height: 30px!important; width: auto!important; } .tc-header .brand h1, .tc-header .brand a{ margin: 10px 0px; } .tc-header .brand .site-title { font-size: 0.6em; line-height: 1.2em; } .tc-header .navbar-wrapper { float: none; position: relative; z-index: 1; } .tc-header .navbar .navbar-inner{ margin: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: none; } .tc-header .navbar .btn-navbar { margin: 9px 0px; } .tc-header .nav-collapse{ /* default fallback */ background: rgb(255, 255, 255) transparent; /* nice browsers */ background: rgba(255, 255, 255, 0.9); /* IE 6/7 */ filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; } } @media (max-width:480px){ .tc-header .brand .site-title{ font-size: 0.5em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tc-header .brand h1, .tc-header .brand a{ margin: 10px 0px 0px; } .tc-header { border-top: none; } .sticky-enabled .navbar .btn-toggle-nav .btn { margin-top: 30px; } .sticky-disabled .tc-header { max-height: 50px; } }
Hi!! It′s works fine but there is only an issue. As you can see in those pictures the main menu change its appearance when you scroll down.
Change this selector in above code:
.sticky-enabled .navbar .btn-toggle-nav .btn { margin-top: -7px; margin-right: 0px; }
it′s working! it′s working!!
You′re the one, thank you very much!!
- The topic ‘How can I block the minimized header with menu only in phone view?’ is closed to new replies.