Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 31, 2015 at 3:53 am #495575
    simulthink

    Hi there

    I have used Enfold to build 25 websites and it is great. But I am not a developer so I need a bit of coding help here to sort somehting out please.

    I need a little help with alignment in a couple of places please. First, in the small bar above the main men and second, with the breadcrumb which has somehow been affected and become top aligned when I was trying a few things.

    I added a button next to the phone number in the small bar above the main menu but I cannot get the phone number to align with the button as well as the social media.

    In the process of trying a few things I edited the custom css. That did not work so I then deleted the custom css changes I made. But somehow the breadcrumb is now top aligned vertically even though I deleted the custom css changes.

    Thanks

    August 31, 2015 at 4:00 am #495576
    simulthink

    The FTP details are now provided below.

    August 31, 2015 at 3:49 pm #495904
    Elliott

    Hey!

    Try adding this to your custom CSS for the breadcrumbs.

    .html_header_top.html_header_topbar_active.html_header_sticky #top #main { padding-top: 140px !important; }

    Can you take some screenshots of your other problems so we can get a better idea?

    Regards,
    Elliott

    September 1, 2015 at 3:01 am #496177
    simulthink

    Thanks Elliott. I tried the CSS code above and that fixed the breadcrumb vertical alignment HOWEVER that stops the transparent header working. So, I have removed the css and the breadcrumb has gone back to top aligned. Any other suggestions?

    The breadcrumb was fine until I tried some custom CSS then deleted it. Not sure why the breadcrumb did not go back to normal when I deleted the CSS.

    Thanks, Mark

    September 1, 2015 at 3:47 am #496188
    simulthink

    Just adding this comment so that the Notify me by email check box is submitted as I missed it before. Thanks.

    September 1, 2015 at 3:38 pm #496454
    Elliott

    Hi!

    Try this then.

    .phone-info .avia-button, .phone-info .avia_button { padding: 0px 10px !important; }

    You can add screenshots by clicking on the “img” button in the editor. You can upload the screenshots to imgur.com or other image hosting service.

    Best regards,
    Elliott

    September 1, 2015 at 3:54 pm #496468
    simulthink

    Thanks Elliott

    That has fixed the breadcrumb vertical alignment.

    Now in the small bar above the menu the Book Online button is a bit too thin and still not aligned with the phone number. You can see the phone number and button vertical alignment at http://www.backfocus.com.au.

    Thanks, Mark

    September 1, 2015 at 4:01 pm #496476
    simulthink

    Elliott, I am also wondering how entering that custom CSS which relates to the phone info fixed the breadcrumb. Thanks, Mark

    September 2, 2015 at 3:55 am #496813
    simulthink

    Hi Elliott

    Sorry about this. I have only asked for help twice in 2 years since using Enfold and building many sites. I am not a developer so I don’t have much coding experience. It also seems I am in a time zone with about 12 hours difference to you so hence the response delays.

    I have now fixed (at least temporarily) the alignment of the “Book Online” button with the phone number in the small bar above the menu. I don’t think that what I have done this is the correct the way to do it but I have changed the Phone Number and small info text to below. The small change I made is to change the position for the button to ‘none’. I am not sure if that is OK or not but it has fixed the vertical alignment (at least temporarily).

    1300 366 284 | [av_button label='Book Online' link='page,149' link_target='' size='small' position='none' icon_select='yes' icon='ue84e' font='entypo-fontello' color='custom' custom_bg='#48d130' custom_font='#ffffff']

    The weird things is that the order I use to change the Phone Number or the CSS affects the result. E.g. if I change the CSS first then change the Phone Number in Header/Extra Elements then the alignment of the phone number and button is fine in the phone area. But if I make any change to the custom CSS after saving the content in the Header/Extra Elements phone area then the alignment of the phone number and button get messed up. Can you please confirm if there is a right or better way to do this?

    Issue with alignment of extra elements in phone area

    I also changed the padding in the css code you gave me to the following with 2px for above and below. The button was looking too thin and cramped with 0. This css code changes the breadcrumb. By using 2px for above and below the breadcrumb still looks OK and the button is a bit better.

    .phone-info .avia-button, .phone-info .avia_button { padding: 2px 10px !important; }

    But, what I don’t understand is why this phone.info css affects the breadcrumb.

    Thanks again. Mark

    September 2, 2015 at 4:42 pm #497251
    Elliott

    Hey!

    Yes, the button your adding is causing the problem so the CSS I posted made it thinner. You can use that, or the other CSS I posted for adding more padding to the main container. If neither of those are not satisfactory to you then take a screenshot and highlight exactly how your wanting it to look so we can get a better idea.

    Best regards,
    Elliott

    September 3, 2015 at 4:23 am #497478
    simulthink

    Hi Elliott

    OK thanks for clarifying that the button in the top bar is causing the problem with the breadcrumb. I will have a think about alternative approaches I can use with the client to achieve the result we need. I them meantime, the recent custom CSS change making the button thinner is working OK. The custom CSS changing the padding to the main container does not work for the transparent header used on the home page so I cannot use that.

    Thanks again, Mark

    September 4, 2015 at 9:50 am #498178
    Ismael

    Hi!

    I’m sorry but what do you mean by “main container”? Can you please provide a screenshot of that area? Use imgur or dropbox for the screenshot. If you’re referring to the main container of the top bar, try to decrease the padding of the phone info and the minimum height of the container:

    .phone-info {
    padding: 2px 0;
}

#header_meta {
    min-height: 20px;
}

    Best regards,
    Ismael

    September 4, 2015 at 9:58 am #498183
    simulthink

    Thanks Ismael

    Elliott from Enfold used the term “main container” in his response before mine. I don’t know what he meant. I was just responding to his post and suggestion.

    In the menatime I will try the CSS.

    I posted some images a couple of days ago. Here they are again.

    phone inof bar images

    Thanks, Mark

    September 7, 2015 at 1:48 pm #499216
    Andy

    Hi!

    images are not loading for me. Please use imgur.com or dropbox to add screenshots into this forum.
    Let us know if you still need help with this issue.

    Best regards,
    Andy

    September 8, 2015 at 2:50 am #499625
    simulthink

    Thanks Andy

    At the moment I don’t need any more help for this. Thanks.

    Mark

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Alignment help for Bar above Main Menu & Breadcrumb’ is closed to new replies.