• Hey all.
    My header has the “top menu” style with the menu placed below the header.
    When i increase the header’s height, it only affects the height of the menu. The area above it (with the image and the site title) is not changed.
    The slider that sets the header’s height works in all other styles, except the one i use (top menu).
    Any help would be appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hello,

    Kindly share a snapshot of your settings and website URL to check the issue.
    (Kindly replicate the issue then take snapshot and share URL)

    Thread Starter johnhoston

    (@johnhoston)

    Thanks for the reply @abhikr781

    The site is only accessible in the company’s intranet.
    But the HTML code of the header is as follows:

    <header id="site-header" class="top-header has-header-media effect-four clr" data-height="74" itemscope="itemscope" itemtype="https://schema.org/WPHeader" role="banner">
      <div class="header-bottom clr">
        <div class="container">
          <div id="site-logo" class="clr" itemscope="" itemtype="https://schema.org/Brand">
            <div id="site-logo-inner" class="clr">
              <a href="..." rel="home" class="site-title site-logo-text">...</a>
            </div><!-- #site-logo-inner -->
          </div><!-- #site-logo -->
        </div>
      </div>
      <div class="header-top clr">
        <div id="site-header-inner" class="clr container">
          <div class="left clr">
            <div class="inner">
              <div id="site-navigation-wrap" class="clr">
                <nav id="site-navigation" class="navigation main-navigation clr" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" role="navigation">
                  ...
                </nav><!-- #site-navigation -->
              </div><!-- #site-navigation-wrap -->
    ...
    

    Given this styling, is there a way to increase the header area?
    I mean the area above the top menu, which contains the image and the site title.

    Thanks in advance.

    PLease try the below CSS code and check.

    #site-header.top-header .header-bottom {
        height: 250px;
    }

    PS- Change the height value according to your need.

    Thread Starter johnhoston

    (@johnhoston)

    Thanks for the reply @abhikr781
    I have already tried this and it works, but partly:
    The header area expands downwards OK, but the site title stays at the same spot, so it is not vertically centered.

    Any ideas on how to fix this?

    Abhishek

    (@abhikr781)

    Hello,

    YOu can try the below CSS and adjust the padding value according to your need.

    #site-header.top-header #site-logo {
        padding: 100px 0;
    }
    Thread Starter johnhoston

    (@johnhoston)

    Setting just padding did the trick, thanks @abhikr781 !!

    Abhishek

    (@abhikr781)

    Glad to hear that issue has been fixed.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Header height when top menu is below it’ is closed to new replies.