Struggling to align elements in Header

Homepage › Community Forums › Epik Theme Support › Struggling to align elements in Header

Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 6, 2014 at 5:41 pm #9838
    axelk
    Customer

      Hi Wes:

      I’m having difficulty aligning the 3 elements in the header: Logo Image, Primary Nav, and Search Form. See: http://akc-dev-site.net/

      There should be enough room to align all 3 elements inline from left to right. But it seems to want to push the Search Form below the primary menu. I’ve tried to change the width of the various elements via Firebug, but something is refusing to cooperate.

      Any insight would be much appreciated.

      January 6, 2014 at 7:46 pm #9843
      kronos
      Customer

        Yes it’s supposed to do that since they are two separate widgets. Widgets are inside a div in most cases, and most of the time those divs show up on separate lines. In order to do what you’re trying to do, you would probably need to make the widgets float left or right in your css.

        January 6, 2014 at 9:14 pm #9847
        axelk
        Customer

          Thanks, Kronos.

          How do I do that? (I’m not a coder!)

          January 7, 2014 at 7:14 pm #9857
          kronos
          Customer

            Did you remove it? I don’t see it.

            You would need to add something like this to your css in order to make that happen – 

            .header-widget-area section {
    float: left;
}

            I’m not 100% sure if that will work since the search box isn’t there, but give it a try and see if it does.

            January 7, 2014 at 7:37 pm #9861
            axelk
            Customer

              I’ve put it back up. Was playing with the layout.

              Thanks, Kronos!

              January 8, 2014 at 11:02 am #9864
              kronos
              Customer

                I still don’t see it, but that code I added above should work. If you add it and the entire widget area falls under the logo to the next line, it’s because there isn’t enough room for the logo area and widget area to fit inside of the 1140px space. You can reduce the width on the logo/title area on line 1895 in your css file – 

                .title-area {
font-family: "Open Sans",sans-serif;
font-weight: 700;
float: left;
padding: 0;
padding: 0;
width: 160px;
}
                January 9, 2014 at 11:46 am #9890
                axelk
                Customer

                  Hi Kronos:

                  OK. I’ve made the suggested changes, but it still doesn’t work. Take a look.

                  Seems that the problem is now the width of the “header-widget area”. But there appear to be (to me) conflicting CSS instructions, including:
                  .site-header .widget-area {
                  color: #ddd;
                  float: left;
                  text-align: right;
                  width: auto;

                  And then at the bottom of the stylesheet:
                  /* Desktops, laptops and iPads (landscape)
                  ——————————————— */

                  @media only screen and (max-width: 1139px) {

                  .wrap,
                  .site-header {
                  max-width: 960px;
                  }

                  .content-sidebar-sidebar .content-sidebar-wrap,
                  .sidebar-content-sidebar .content-sidebar-wrap,
                  .sidebar-sidebar-content .content-sidebar-wrap {
                  width: 740px;
                  }

                  .content,
                  .site-header .widget-area {
                  width: 620px;
                  }

                  Which governs? Which do I change, without screwing everyone up?

                  Thanks!

                  January 9, 2014 at 8:58 pm #9899
                  kronos
                  Customer

                    I don’t see the code added in your stylesheet. Are you using a caching plugin or something that may be preventing the code from showing up…..or did you remove the code? I would need to see the code in there in order to know what needs to be adjusted.

                    January 9, 2014 at 10:03 pm #9903
                    axelk
                    Customer

                      I know. It’s weird. No special plug-in. Code is not removed. If possible, I can send you a copy of the complete active style.css file. I’ll send you my email in a private reply, and let me know. As indicated before, your help is definitely appreciated.

                      With my limited knowledge, I am definitely confused by the new HTML5 “responsive” code. Doesn’t seem as intuitive to a non-coder like me, compared to pre-HTML5. And Firebug doesn’t seem to read/ play-back the code accurately.

                      January 9, 2014 at 10:04 pm #9904
                      axelk
                      Customer
                        This reply has been marked as private.
                      • Author
                        Posts
                      Viewing 10 posts - 1 through 10 (of 10 total)
                      • You must be logged in to reply to this topic.