Tagged: 

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • May 30, 2016 at 12:07 pm #640255
    kaloraat

    Hi
    I am working for a client and having difficulty customising header and footer.
    He wants no menu at the moment but might bring back later. He wants logo left, menu below (currently hidden, he dont want to use at the moment) and address right. I have two issues.

    First Issue:
    Currently I have used logo left, menu below and used a widget to display address at right side.
    Here are the problems: Please see the screenshot. http://prntscr.com/ba4gl2

    • Text widget with address at right side is not responsive, It gets cut off in small screen
    • It does not shrink with the logo as a result body text appears on top
    • Text widget is not clickable at all, I cant select text
    • I need to format text widget with the contact text underline, email clickable, bigger and bold and change color on hover

    Second Issue:
    I want to use footer widget to show the links(menu) with a logo in right. I have made it however I need to make it similar to this screenshot, please have a look. http://prntscr.com/ba4gxy the problems are:

    • I cant change the background color to white and text color to black, with hover effect.
    • Text is not aligned with the logo on right, I need to make text appear horizontally centered.

    Third Issue

    I want the icon color (default right pointing arrow in circle) on image hover to be white transparent. Currently it is black transparent. How can i change that? Please see this screenshot. http://prntscr.com/ba5h9n

    I also want to disable mobile menu, please help.

    Please help me with this. Early response will be highly appriciated. Thank you very much in advance!

    • This topic was modified 8 years, 5 months ago by kaloraat.
    May 30, 2016 at 2:14 pm #640367
    Yigit

    Hey kaloraat,

    1- 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: 1024px) {
#header .widget { font-size: 24px; }}
.header-scrolled#header .widget {
    padding-top: 0;
}
#header .widget { z-index: 99; }

    You can use HTML in your text widget to make your email linked then you can add following code to Quick CSS to change color on hover

    #header .widget a:hover { color: red !important; }

    2- Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #footer a {
    color: #222222;
}
#footer {
    background: white;
}
#footer #text-3 {
    line-height: 100px;
}

    3- Please go to Enfold theme options > Advanced Styling and edit “Linked Image Overlay”

    Best regards,
    Yigit

    May 30, 2016 at 2:33 pm #640395
    kaloraat

    Hi Yigit,
    You are legend! I am very happy to get your quick response. Please have a look at this link. When i scroll the page, the logo gets smaller however address on the right side dont and overlaps the body text. I want to add social icons just below address in the same widget too.

    Is it possible to make it shrinkable and responsive the same way as logo with all the content still visable? May be with a slight drop shadow? Here is the link and screenshot.

    http://www.riseuptours.com.au/sri-lanka/

    http://prntscr.com/ba5x5e

    Also, Is it possible to make the address widget go under the logo in mobile? In mobile screen it is still cutting off.

    I also need to hide menu icon on mobile devices.

    Is it possible to have other icons on image hover than default circle with right pointing arrow lcon?

    Is it possible to display search box somewhere but not with menu, I have menu display none at the moment.

    I am sorry but I cant change the pipe’s color to black between the links in footer. They are faded grey at the moment. Please see this screenshot. http://prntscr.com/ba66cf

    padding seems too big between header and body, maybe because i have done display:none to menu. Is there a way to reduce the padding there?

    Hope to hear from you soon!
    Thank you for your great support!

    • This reply was modified 8 years, 5 months ago by kaloraat.
    May 31, 2016 at 10:43 am #640804
    kaloraat

    Hi
    Can please someone help me get this right?

    Thank you!

    May 31, 2016 at 12:20 pm #640866
    Andy

    Hi,

    We would be glad to help you with this customization, but at the moment there is no easy way to do this by using a small custom code snippet, so I am afraid its out of the scope of our support.

    But please feel free to request such feature at our feature request system: https://kriesi.at/support/enfold-feature-requests/

    This system allows us to keep track of user suggestions and lets you vote on the feature you would like to see the most. I am afraid though there is no guarantee that a feature will get implemented. If that’s something you really need you can always try to hire a developer for the task :)

    Best regards,
    Andy

    May 31, 2016 at 12:23 pm #640869
    kaloraat

    Hi Andy,
    All I want is make this address widget behave with the logo. when the logo shrinks, I want it to shrink to the similar level. And make it responsive, It is cutting off.

    I am sure you can help me with this, Dont worry about other small issues, I will try myself but this is the most important. Or else the website is useless. Just want to make it responsive for mobile and behave with the logo.

    Please try again. I am waiting for your response.

    Thank you!

    May 31, 2016 at 1:15 pm #640898
    Andy

    Hi,

    we can help you with small issues, but if it takes too much work then you need to hire a freelance developer for this job.

    What exactly do you want to change with your logo on mobile? A mockup showing the results would help us a lot, to provide you some precise css code. If you want to shrink your logo use this code:

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
width: 40%;
}}

    and adjust as needed.

    Best regards,
    Andy

    May 31, 2016 at 1:23 pm #640906
    kaloraat

    Hi Andy,
    When I scroll the page this is how text widget appears on top of the body text, I want to make it shrink with logo and stay inside header element.
    Please see the screenshot
    http://prntscr.com/ba5x5e

    text widget gets cut off in mobile screen, I want it to go below logo in mobile
    Please see the screenshot
    http://prntscr.com/bak439

    Thank you very much.

    May 31, 2016 at 1:25 pm #640908
    kaloraat

    I have also supplied my login detail in this thread as private. Please use that if necessary, Thanks

    June 1, 2016 at 10:51 am #641370
    Andy

    Hi,

    please open different tickets for different questions/issues.

    1.) Textwidget can’t shrink, because it’s not a logo element. However, I checked your website and it looks good to me now:

    View post on imgur.com


    Could you fix it already?

    2.) Use this code for your textwidget:

    @media only screen and (max-width: 767px) {
.custom-info p {
font-size: 25px;
}}

    and adjust font-size as needed.

    Best regards,
    Andy

    June 1, 2016 at 10:55 am #641372
    kaloraat

    Hi Andy,
    I almost fixed it however, the padding on top of header is an issue now. How to get rid of the padding on top of header (logo and address widget)?

    Thanks!

    June 1, 2016 at 12:23 pm #641413
    Andy

    Hi,

    use this code:

    .custom-info {
padding: 0px;
}

    Best regards,
    Andy

    June 1, 2016 at 12:29 pm #641419
    kaloraat

    Hi
    The code does not work, please have a look at this screenshot. I want to completly remove the space above the logo and address bar in the header.

    http://prntscr.com/bayh7v

    June 1, 2016 at 1:15 pm #641453
    Andy

    Hi,

    use this instead:

    .widget {
padding: 0px;
}

    Best regards,
    Andy

    June 1, 2016 at 1:28 pm #641468
    kaloraat

    It worked, However the logo image is not clickable. Only the lower bottom of the logo image is clickable and completly unclickable on page scroll (while the header is shrinked).

    Please give me css to make the whole widget custom-info behave the same way as logo, shrink on top within the header on page scroll.

    Please see yourself at:
    riseuptours
    I have provided the login details in this thread, if you need to login to the website.

    Thank you

    • This reply was modified 8 years, 5 months ago by kaloraat.
    June 2, 2016 at 4:02 am #641787
    kaloraat

    Hi
    Waiting for someone to help..

    Thanks!

    June 2, 2016 at 11:15 am #641951
    Andy

    Hi,

    As I already told you please open different tickets for different questions/issues.

    As I already told you it’s not easily possible that the widget area will shrink. For this job you need to hire a freelance developer.

    Please update the theme to the latest version. That should fix any issues you are currently experiencing :)

    To update to the latest version follow the simple instructions here. (Or if you want the super detailed explanation you can read this blog post)

    Update your WordPress as well.

    Best regards,
    Andy

    June 2, 2016 at 11:28 am #641962
    kaloraat

    Well Andy, It’s not a different issue. It is the same issue!!
    All I am asking is a header with logo left and and a text widget right. And Make it responsive on mobile and on page scroll.

    And you are telling me to hire a freelancer for that? Why are you suggesting me to update theme? Will that fix my issues?

    Please be clear when answering, I am spending days for such a basic task.

    I was proud of having enfold but you have proved me wrong, If you are not interested in answering please dont. I would be lucky have my questions answered by someone else!

    June 2, 2016 at 12:09 pm #641978
    Andy

    Hi,

    as already said: yes, that should fix any issue you are experiencing right now. If not, then let us know and we are happy to support you any further.

    On mobile I see this:

    View post on imgur.com


    Which seems totally responsive to me. If you need anything beyond that, then I’m sorry, but this would be beyond our scope of support and yes then you would need to hire a freelance developer for this job. You can find one here: kriesi.at/contact/customization

    Best regards,
    Andy

    June 2, 2016 at 12:24 pm #641990
    kaloraat

    Hi
    Yes it is responsive. The problem is:
    Issue 1. I cant click logo, it is not clickable. Try yourself. I think the right side widget is sitting on top of the logo element or something wrong!

    Issue 2. Social icons appears on top of body. It is not contained within header. It does need to shrink with the header element on page scroll. Cant leave it flow out of header can I?

    screenshot

    This header widget is supported by enfold, not something i am trying to customize beyond theme’s ability.. But it has to not only look right but perform right too. Logo is not clickable because of this widget. It also does not contain all the elements within header, try scrolling page up and down visit page. This is extremly sad! I will update theme but it is clear that these issues are not theme update related.

    Please fid\x this.
    Thank you.

    June 2, 2016 at 12:42 pm #642007
    kaloraat

    Just letting you know, I update the theme. No difference.

    Anyway, you can close this thread. Thanks

    June 2, 2016 at 12:51 pm #642014
    Andy

    Hi,

    change your existing code to this:

    .custom-info {
width: 37%;
left: 80%;
}

    and add this:

    .header-scrolled {
height: 240px;
}

    I hope that’s fixing everything now.

    Best regards,
    Andy

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘header with logo left, address right, menu below and make it responsive’ is closed to new replies.