Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 23, 2014 at 11:24 pm #214150
    paulrt27

    what code would i need please in order to display a custom header image of 1000px wide by 300px high?
    thanks,
    paul

    January 23, 2014 at 11:27 pm #214155
    Yigit

    Hey paulrt27!

    What type of header are you using? You can post the link to your website or check it in Enfold theme options under Header tab.
    Please try adding following code to Quick CSS in Enfold theme options under Styling tab

    .logo, .logo a, .logo img { max-width: 1000px!important; max-height: 300px!important; }

    Cheers!
    Yigit

    January 24, 2014 at 10:32 pm #214618
    paulrt27
    This reply has been marked as private.
    January 25, 2014 at 3:00 am #214669
    Ismael

    Hi!

    You can actually use the “Header with social icons and bottom navigation” then set the theme to “Boxed Layout”. You can apply the logo as header background. Add something like this on QUuick CSS:

    #header {
background-repeat: no-repeat;
background-image: url(https://localhost/kriesi/enfold/wp-content/uploads/2012/04/2.jpg);
background-attachment: scroll;
background-position: center center;
background-size: cover;
}

.header_bg {
opacity: 0;
filter: alpha(opacity=0);
}

.logo {
display: none;
}

    Change the background-image url with your logo background.

    Regards,
    Ismael

    February 2, 2014 at 4:04 am #218346
    paulrt27

    i prefer the layout as stretched ideally.

    is it not possible to simply add a custom header logo that it is either 1000px, or 1010 or even 1030px wide and 200px high. surely this can’t be that difficult to achieve. i tried the code you gave me and replaced the url with the following: http://www.catalyst2change.co.uk/wp-content/uploads/2013/12/Cat2Change_headerbkgrnd.jpg and it just gave me a completely blank header. plus i wanted the header to remain stretched if poss rather than boxed, as like the blue colour to carry on right across the width of the page.

    the customer requires a more snazzy header image rather than just a basic 340px * 156 logo, which just wouldn’t give me anywhere near enough space for the amount of stuff they want to have at the top of the page in a banner style graphic.

    please advise the easiest way to add a custom header image.

    i did also try adding an image in this section of the header section:
    Custom Background Image
    Upload a BG image for your Header

    but when i uploaded the image it did not show when i viewed the page in my browser.

    as i said, the image will simply be around 1000px wide by 200 high.

    thanks,
    paul

    February 2, 2014 at 4:36 am #218357
    paulrt27

    and none of these work either in quick css:

    .logo img {
    height: auto;
    width: 1010px;
    }

    or:

    .logo img {
    height: 200px;
    width: 1010px;
    }

    and neither does:

    /*header with social icons: */
    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 200px; line-height: 200px; }

    So totally stuck right now :-(

    February 3, 2014 at 12:00 am #218532
    paulrt27

    kept fiddling and kind of got the heading logo how i would like, i did it by inserting the image via the ‘upload custom background image’ as found in the enfold styling header options.

    however, i had to resize the image down considerably, as it was overlapping the social media icons. didn’t mind this to a point as was prob too big in any case. but even when i resized it down from 1010px wide down to just 660 wide and 131px high, part of the image was being chopped off in the header. i have now shrunk it down to just 500wx79h pixels, but i think it’s a tad small. how can i set the logo to any size i want in this section without parts of it getting chopped please? is there any code i can use in the quick css section for example or something else i could do.

    thank you kindly,
    paul

    February 3, 2014 at 12:02 am #218533
    paulrt27

    this is just a basic page (www.catalyst2change.co.uk) i am fiddling with to try and learn the theme, it is the page where i am having trouble getting the logo to display any bigger than 500 px wide by 79 high, in the header section, without any of it being chopped off.
    thank you,
    paul

    February 3, 2014 at 8:57 pm #218981
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.bottom_nav_header.social_header #header_main .container {
height: 135px; }}
@media only screen and (max-width: 767px) {
.bottom_nav_header.social_header #header_main .container {
height: 110px!important; }}

    Cheers!
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘header style logo’ is closed to new replies.