-
Posts
-
Hello, I hope this will be the last questions with the theme 🙂
1- There is a padding-top in the sticky header for desktop, you can see here:
I need that the padding-top is 0, I tried changing this css code inside scoop/assets/css/style.css:
.sticky-header .logo {
overflow: hidden;
max-height: 60px;
padding: 15px 0;
margin: 0;I change to:
.sticky-header .logo {
overflow: hidden;
max-height: 60px;
padding: 0;But this dont work…
And in the header for tablet and phone there is a padding-top and padding-bottom over and under the logo and i need to set this paddings to 0, how i can do it? Thanks
2- I need that the author in the homepage (see black bubble) and the “no comments” (see red bubble) they dont link to anything, i need this texts without links…how i can do it?
Thanks a lot.
Hello Daniel,
1. You’re trying to display the entire logo in the sticky header right? You can try inserting the following code:
.sticky-header .logo{padding:0 !important;}2. Try inserting the following code:
.entry-meta{ pointer-events: none; cursor: default;} .entry-comment{ pointer-events: none; cursor: default;}1- That works perfect for the sticky header for desktop 🙂 But the logo in the header for phone and tablet has padding-top and padding-bottom, how i can change this? Thanks
2- Perfect. Thanks
You can add this CSS:
@media (max-width: 767px)
#header.logo-left .logo {
margin-top: 0;
margin-bottom: 0;
}-I add this css inside the LIVE CSS but dont work…
– In phones and tablets when the header is loading shows first the logo that i have for desktop and then shows the mobile logo, how i can change this? I want to show only the mobile logo directly.
-I used a tablet of 8 inches to see my web and the header is shown like the desktop (shows the categories and the logo for desktop), why can be this? with others tablets dont happen…can be the resolution?
Thanks a lot.
1. I see that you’ve removed the sticky header from the site, so I can’t check this issue out.
2. I don’t see this issue..do you maybe have a cache plugin installed?
3. Yes, it goes by resolution. In general the tablet is supposed to display the desktop menu.
You can see this in our demos.
(unless the screen is so narrow that it has the mobile resolution – 768px..)
1- I removed the sticky header for phones and tablets but not for desktop. But what I want is to change the padding-top and padding-bottom in the header for phones and tablets, not the sticky header.
2- I am using w3 total cache yes, why can happen this and how i can fix it?
3- I understand, the problem is that the header is shown like this in tablets:
How I can hide the categories in the header like in the mobile header? And I want to show the mobile logo for tablets, now shows the desktop logo for tablets.
Or how I can show a different primary menu for tablets that shows a few categories and it appears all in the same row.
Thanks a lot 🙂
1. Ok try this code:
@media (max-width: 767px) { #header.logo-left .logo { margin-top: 0px !important; margin-bottom: 0px !important; }}2. First of all try deactivating the plugin, cleaning your browser’s caching and then refreshing the page.
3. So you can reduce the spaces between the menu elements only for tablet (set it by resolution).
We are actually working on a product that will enable this in a built-in way.
The same answer goes for your other questions regarding the menu, you can do these with CSS.
However unfortunately we don’t provide such customization coding, we generally provide support regarding technical issues..
1- That works perfect! 🙂 The last question, and for changing the margin left and right of the header will be a code like this:
@media (max-width: 767px) {
#header.logo-left .logo {
margin-left: 0px !important;
margin-right: 0px !important;
}}But if I want that only works for phones which will be the “max-width”? Thanks.
2- I will try, thanks a lot 🙂
3- I understand, and when will be this product working? Will be a plugin or its something will be inside the theme?
Thanks
1. The
@media (max-width: 767px)/@media (max-width: 768px)is only for mobile devices.2. This product will work in the future, however in the meantime you can use some CSS coding.
Thanks.
1- I tried to change the right margin for this word “menu” inside the phone header with this css:
@media (max-width:768px) {
button.navbar-toggle.visible-xs:before {content: ‘menu’; margin-right: -13px !important;}}But the problem is that part of the word “menu” hides, you can see an image here:
How I can fix this? Thanks a lot
2- Thanks, I will wait until you have this product for do this changes because i am really noob with css coding 🙁 Meanwhile how I can show the mobile header until the resolution of 1024×600 (10″ netbook) and 1024×768 (12″ netbook), because until this resolution the desktop header is shown bad…
Thanks a lot,
DaniHi,
On my device it looks very good.
But anyway, why don’t you give it a little extra margin?Thanks.
You mean extra margin for the question 1 or 2? How I can do it? Thanks a lot
You mentioned that you gave:
@media (max-width:768px) {
button.navbar-toggle.visible-xs:before {content: ‘menu’; margin-right: -13px !important;}}Didn’t you do it in the LIVE CSS section?
So, instead of margin-right:-13px, you can give margin-right: -5px (play with it until it suits your needs).
Thanks, but if i set margin-right: -5px or 0px is shown the menu but the logo and the menu are shown in 2 rows in some little smartphones, you can see this image:
And what i whant to change to less is the margin you see with red lines in this image:
Thanks a lot,
DaniWould you like to give me admin access and i will check?
This reply has been marked as private.We checked here in a few mobiles and it seems ok, what resolution exactly are you referring to?
The problem is only shown in the explorer of android, i have checked with the firefox and chrome for mobile and it seems ok there. Then the problem is from the explorer no?
Thanks a lot.
Yes I see it in IE..unfortunately the only option I see here is to move the whole mobile menu element a little to the left.
You can do so with the following code:
#header.logo-left .logo .navbar-toggle, .sticky-header.logo-left .logo .navbar-toggle{margin-right;}
The forum ‘Support (Legacy)’ is closed to new topics and replies.