-
Posts
-
Hello,
There is alot of problems with the header on my website. The menu is overlapping the logo and there is some alignment problems when resizing the browser. The problems is fixed if I uncheck the “Let logo and menu position adapt to browser window” but I don’t like that layout (but maye to fix it could be to have that function added in the responsive version, but not in normal?). I have also tried to add somme css in the “qucik css” to get the active page blue, but it doesn’t work. I added this code: .header_color .main_menu ul:first-child > li.active-parent-item > a {color: #004490}”
Another weird thing is that the whole conten’t on the page get’s “pushed together” on a certain width when resizing the browser, also the header menu (and that is why the alignment problems appear). Maybe that is the “responsive effect” in the Enfold theme, but it is causing some problems on my website. I have also added some “custom info boxes” I created with css. I inserted the code into “code blocks” and the css in the custom.css file. The boxes isn’t showing correctly, and when resizing the browser they gets “pushed” together, like if the codeblock doesn’t have padding. Please help me out! I have provided login information in the “private section” so you can login and check it out/solve it. Thank you for the help!Hi!
This code will solve the overlapping menu issue:
@media only screen and (max-width: 989px) { .main_menu, #header_main_alternate{display:none;} .container #advanced_menu_toggle, #advanced_menu_hide{display:block;} #mobile-advanced{display:block;} }Best regards,
JosueThank you Josue! That is great! Is there maybe a way to use the “Let logo and menu position adapt to browser window” when the browser width gets under 989px? Because I think that will look better with the logo etc.
I still need help with the other questions:
1: . I have added this css in the “qucik css” to get the “active/current page” blue, but it doesn’t work. I added this code: .header_color .main_menu ul:first-child > li.active-parent-item > a {color: #004490}”
What is wrong?2: When the browser width gets to about 738px (about there) my codeblocks gets pushed together without any padding, and I don’t know why Enfold theme does that. Is there a way to fixe it, and add space between the codeblocks? It looks like the codeblock doesn’t support padding or something.
3: another question, with the notification box I have used the “capitalize” css code, because I don’t want any capital letters, but it still has the first letter in a word with capital, am I doing something wrong?
(if you need the WP login etc. is in the private section above) Thank you very much for the quick reply and great support!
Kind regards
Hey!
1) That seems to be working on the live site and the css is correct. Maybe refresh the page or view it in an incognito window so there is no caching.
2) Whatever is inside of the code block would need padding added to it since its raw code.
3) Capitalize means each word is going to be capitalized. You want none if you want plaintext: http://www.w3schools.com/cssref/pr_text_text-transform.asp
Best regards,
DevinOkay thank you! Well the code inside the codeblock already have padding, in the css. But maybe I am doing something wrong? I don’t understand why it pushed the codeblocks together. This is what there is in the codeblock:
<div class=”ribbon”>
<h3>Worried?</h3>
<BR><span style=”font-size: 12pt;”><p>If you’re convicted of a crime, there can be devastating consequences.</p></span>
<p>
<BR>
[Read more]
</p>
</div>And this is the css from custom.css file (the same code is also added in the mobile styles section):
.ribbon {
width: 240px;
margin: 10px auto;
padding: 0 10px 0;
position: relative;
color: #444;
background: #fff;
border: 1px solid #d2d2d2;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-align: center;
font-size: 14px;}
.ribbon h3 {
display: block;
height: 30px;
line-height: 1.3;
width: 260px;
margin: 0;
padding: 5px 10px;
position: relative;
left: -20px;
top: 8px;
color: #FFFDFD;
text-shadow: 0 1px 1px #2C6A92;
border-top: 1px solid hsl(203, 46%, 60%);
border-bottom: 1px solid hsl(203, 49%, 51%);
background: #81ADCC;
background: linear-gradient(top, #88B6D6 0%, #558DA3 100%);
border-radius: 2px 2px 0 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-size: 19px;
}
.ribbon h3::before,
.ribbon h3::after {
content: ”;
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -23px;
z-index: -10;
border: 11px solid;
border-color: #486B8B transparent transparent transparent;
}
.ribbon h3::before {left: 0;}
.ribbon h3::after {right: 0;}
}What is the problem? Can you please help me out?
Thank you!
Kind regardsHey!
Thank you for the info.
Please use this on Quick CSS or custom.css to adjust the columns with the ribbon:
@media only screen and (min-width: 768px) { .ribbon h3 { width: 220px; } .ribbon { width: 200px; } }Cheers!
IsmaelHi again, when I paste the code to the quick css nothing happens, even though i set the padding really high, I can’t se any difference? What do you think is the problem here? This is what I just paste in the Qucik css: @media only screen and (min-width: 768px) {
.ribbon h3 {
width: 220px;
}.ribbon {
width: 200px;
}
}
the exact same code as what you posted. And thank you so much for your continuing support, I really appreciate that!
Kind regardsHey Slimmer1!
Sorry for the late reply!
I tried to find “ribbon” class on your website but i could not. Can you please post the link to your page where you have it and point it out?Cheers!
YigitHello Yigit,
Sorry I have removed the ribbon and now created a styled text block instead, and that works great! But thank you very much for the support and help!!
Kind regards
- The topic ‘responsive problems Enfold’ is closed to new replies.