WordPress.org

Ready to get started?Download WordPress

Forums

Constructor - Menu Bar Height? (5 posts)

  1. megmuck
    Member
    Posted 3 years ago #

    Hi-- Yet another newbie question here.

    I'd like to change the height of the menu bar (navigation bar?) that sits in the header of the Constructor theme (default version). How can I do that?

    I've managed to change the height of the dividing lines between the menu items, the size of the font, the space between the items and the left and right end of the menu bar, but I can't figure out where to change the height.

    Thank you for your help.

  2. Alx Block
    Member
    Posted 3 years ago #

    You should look for this code in your style.css file (on line 222):

    #menu li a, #menu li span {
        display: block;
        font-weight: 700 !important;
        height: 40px;
        line-height: 40px;
        min-width: 104px;
        padding: 0 8px;
        text-align: center;
        white-space: nowrap;
        width: auto !important;
    }

    You can change the line that says height: 40px; to be whatever height you want. Although it may look a little odd if you go too big with it.

    Something like:

    #menu li a, #menu li span {
        display: block;
        font-weight: 700 !important;
        height: 50px;
        line-height: 40px;
        min-width: 104px;
        padding: 0 8px;
        text-align: center;
        white-space: nowrap;
        width: auto !important;
    }

    might work.

  3. megmuck
    Member
    Posted 3 years ago #

    It doesn't quite work.

    If I increase the height--say, to 200px-- I get a tall menu bar with lines between the menu items. If I decrease the height -- to 20 px-- the lines between the menu items get shorter, but the menu box stays 40 px high. It seems like something is keeping the menu bar at least 40 px tall, but I don't know what.

    Any idea what's going on?

  4. Alx Block
    Member
    Posted 3 years ago #

    Hard to say. It might have a <div class> in your header.php file.

    Without looking at it, my best guess would be that there is a line that says something like:
    <div class="opacity shadow" id="menu">

    You'll need to give it a height. So for 20px, it would be this:

    <div class="opacity shadow" id="menu" style="height: 20px;">

    Again, that's just a guess. But take a look and you might find the solution there.

  5. megmuck
    Member
    Posted 3 years ago #

    Thanks for the advice; I appreciate it.

    Alas, there are no <div class > lines in the header.php file-- just this, as far as div stuff goes.

    <div id="body">
    <div id="wrapheader" class="wrapper">
    <div id="header">
    <?php get_constructor_menu() ?>
    <div id="title">
    <?php if (is_home() || is_front_page()) { ?>
    <h1 id="name">/" title="<?php bloginfo('name'); echo " » "; bloginfo('description');?>"><?php bloginfo('name'); ?></h1>
    <?php } else { ?>
    <div id="name">/" title="<?php bloginfo('name'); echo " » "; bloginfo('description');?>"><?php bloginfo('name'); ?></div>
    <?php } ?>
    <div id="description"><?php bloginfo('description');?></div>
    </div>
    </div>
    </div>

    Any idea where else the menu bar height might be lurking?

    And I thought Constructor would be a good theme for newbies...

Topic Closed

This topic has been closed to new replies.

About this Topic