Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 21, 2018 at 9:27 pm #915730
    bonbuttercup

    I’ve spent two days searching this topic and can’t find an answer. Currently the width of the logo space is 413. I can change the HEADER CUSTOM HEIGHT, but not the width? I need code to change the width, but still keep the logo expansive as the window changes size. Currently the logo width is a set 413. I’d like it at least 500 px.

    Please advise.

    February 22, 2018 at 4:40 am #915854
    Rikard

    Hey bonbuttercup,

    Your site looks to be in coming soon mode, could you post login details in private so that we can have a closer look please?

    Best regards,
    Rikard

    March 4, 2018 at 12:09 am #920919
    bonbuttercup

    Rikard, sorry. Site is live. I found and successfully tried adding a widget there, but the problem is, when the responsive mode kicks in, the widget either runs over the logo or over the nav bar. It doesn’t respond without [what I can only assume] is a lot of coding that’s beyond my expertise.

    I want to use that blank real estate to include our parent company logos – OR – whenever we have a boat show or other event (see example here: http://tciwest.com/j4f/wp-content/uploads/Untitled-3.jpg).

    It’s real easy for me to make one image with different items contained in the one file. I think it would be the easiest way to keep the proper responsiveness as the logo responds when the page is sized down.

    Unless you may have another suggestion? Please advise.

    March 4, 2018 at 9:37 pm #921180
    Basilis

    Hi,

    I think that it does look and work really nice! Good Work!

    Best regards,
    Basilis

    March 5, 2018 at 8:53 pm #921772
    bonbuttercup

    Rickard, Basilis:

    The images are screen captures, it’s what I WANT it to look like, but I can’t make it happen because the width is too small. I need to make the logo width wider. Currently it’s 413 pixels, but there is no way to adjust the logo width. This is the question I need answered. You have an option to change the height, but not the width.

    Please advise.

    • This reply was modified 6 years, 8 months ago by bonbuttercup.
    March 6, 2018 at 6:39 am #922068
    Rikard

    Hi,

    Thanks for the feedback, but I’m not sure if you would be able to do that without distorting the proportions of the logo. If you use CSS like this for instance, I’m pretty sure that would happen:

    .logo a img {
  min-width:600px !important;
}

    Maybe you could place the logo inside a widget instead? http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    Best regards,
    Rikard

    March 6, 2018 at 10:52 pm #922541
    bonbuttercup

    The problem I found with a widget in the header area is you cannot stop the widget from covering the logo or the nav bar if the window is resized.

    Ideally, I would love a widget area to the right of the logo (1) that responds as the logo does (resizes at the same rate), (2) that does NOT cover the navigation bar OR the logo (or any other element) upon resizing the window, and (3) disappears once the screen becomes too small to display all of the elements.

    Adjusting the left percentage is only good if you never move the window width. That widget area needs to NOT cover the other elements upon resize. I’ve added a logo in for your inspection based on the code below. It works, but if you resize the window, elements get covered. Is there a better way?

    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    March 7, 2018 at 12:03 pm #922882
    Victoria

    Hi bonbuttercup,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 480px) and (max-width: 990px) {
    #media_image-2  img {
      width: 60%;
      margin-left: 40%;
     }
}
#media_image-2  img {
  margin-top: 20px;
}

@media only screen and (max-width: 479px) {
  #media_image-2 {
    display: none;
  }
}

    I think you need to have the burger menu on the iPad landscape also at 1024px
    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 6, 2020 at 7:57 pm #1190960
    Nancy

    Hello! I was trying to do something similar, where I can make the logo section wider. I really just want to display a message apart from the logo.

    But with the given space, it is very small.

    I tried the code above:

    .logo a img {
    min-width:600px !important;
    }

    Which did allow for more space but now the logo seems vert blurry.

    Also, the menu no longer shrinks when I scroll down.

    • This reply was modified 4 years, 8 months ago by Nancy.
    March 6, 2020 at 10:16 pm #1191018
    Victoria

    Hi BeyondMS,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    October 8, 2020 at 5:48 am #1251287
    ashchawla
    This reply has been marked as private.
    October 11, 2020 at 6:02 pm #1252064
    Victoria

    Hi ashchawla,

    https://share.getcloudapp.com/6quPeQj8 You can try setting a custom header height here in the Theme Options > Header and then if the logo is not big enough we can try to adjust it.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.