Wordpress Themes - WP Forum at BFA - Menu doesn't display properly

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)

- - Menu doesn't display properly (http://forum.bytesforall.com/showthread.php?t=22573)

Menu doesn't display properly

Top menu bar has partly moved above the top of page.

If I place it using 'breadcrumbs1-bg' the menu sags down covering post title and right side bar upper widget.
I made a shorter menu. Problem persists.

I did not find location of second menu.

I created single-dr.php to address the menu issue. After juggling with this for two days I find that when I update a post or widget, the update halts midway showing 'wp-admin'

I am using child theme for montezuma.
The functions.php enables to make modifications in 'Leave a reply' using 'comment_form_defaults'.
I do not know how to do the same with Montezuma.

function

more info please in detail. Url would be helpful.

Based on Dr. Ashok's profile, I think this might be the web site that he's having problems with.

Because there are so many different menu items, and there is so much text for each menu item, I'm thinking at a minimum that you will have to move the menu bar on a separate row below the logo area (and above the breadcrumbs bar). Don't put it inside the breadcrumbs DIV, but take it out of the banner DIV and create a separate DIV for it with a class of row, at the same level as the banner DIV. In your CSS, you will need to change the position property of #menu1-wrapper from absolute to relative, and you probably also want to change the float property of #menu1 to left.

What changes are you trying to make for Leave a Reply?

Hi CrouchingBruin,
Thanks for your wonderful expertise.

It's time to report.

I am not able to figure out using
1. 'Site Title' and 'tag' along with 'search' & 'categories' side by side in two adjacent columns on one row.

2. I don't mind if they are in two rows, one below the other.

3. The menu that you see now (NSFW) is a much smaller trimmed version of my original menu. If I wanted my original menu on the top,
# is there a way I can accommodate the entire menu on single row without overlapping?
# Is making fonts and cells smaller a good approach to have menu in one single line?

Why on single row?
When one menu row folds and is above another the upper menu cannot be accessed because the lower menu gets activated.

Purpose of 1, 2, 3 is to have all contents accessible so that I can do away with sidebar and use the full width of the page.

I did try playing with 'hamburger menu' github. It is widely prevalent and I would have loved to use it, but you have kept it in a gold mine. I will have to take few classes to have that level of expertise.

Montezuma interface of boxes makes damn good sense. I haven't been able to understand it much though fully documented. If you can give a link to where I can get more tips and names of some websites it will be easier for me to grasp.

Thanks for your time,
Regards,
Ashok

To set your site title and tag line on a single row in two columns, I would move the tag line to a separate column div inside the banner div. For example, your header.php currently looks something like this:

Code:

<div id="banner" class="row">

   <div id="logo-area" class="col12">

      <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">

         <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>

      </<?php bfa_if_front_else( 'h1', 'h3' ); ?>>

      <p id="tagline"><?php bloginfo( 'description' ); ?></p>

   </div>

</div>

You can move the tagline into a separate column DIV, but still inside the banner DIV, like this:

Code:

<div id="banner" class="row">

   <div id="logo-area" class="col5">

      <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">

         <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>

      </<?php bfa_if_front_else( 'h1', 'h3' ); ?>>

   </div>

   <div id="tag-area" class="col7">

      <p id="tagline"><?php bloginfo( 'description' ); ?></p>

   </div>

</div>

They should then appear side-by-side.

I'm not sure what you mean by getting the 'search' and 'category' side-by-side, I currently do not see it on your site, but you would create another row DIV like the banner DIV, place it under the banner DIV, with two column DIVs inside of it that is similar to the logo-area and tag-area DIVs above.

If your original menu is longer than what is shown, I do not see a way of having it all on a single row, there are just to many characters. You can try reducing the font size, but at some point, it will become too hard to read. You will also run into the problem of users who don't have their browsers expanded to the full width of their screen, or who are viewing your page on smaller screen sizes.

I was going to suggest having a sidebar menu instead, because that should easily accommodate as many menu items as you need, but since you want to do away with the sidebar, that's not an option.

Another option would be to always show the mobile menu. If you make your browser window narrower, at some point, you will see the mobile menu appear as a drop-down list. If you want to try always using the mobile menu instead of the regular menu, you can add this CSS at the end of various.css:

Code:

.menu1-mobile {

   display: block;

}

#menu1 {

   display: none;

}

You can learn more about box sizing here.

Hi,

Code:

<div id="banner-bg" class="cf">

        <div id="banner" class="row">

                <div id="logo-area" class="col5">

                        <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">

                                <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>

                        </<?php bfa_if_front_y welse( 'h1', 'h3' ); ?>>

      </div>

      <div id="tag-area"class="col7">

                        <p id="tagline"><?php bloginfo( 'description' ); ?></p>

          </div></div>

      , 

  </div>

The above code doesn't show site title and tag line adjacent to each other. Hence, space on the right is unused.

The idea was to have 'search', 'categories' and 'menu' all in header. Then I can do away with the sidebar. each post & page will have a broad canvas.

I haven't worked on the menu. I love the hamburger.

Many thanks to you for making things easier.

Regards,
Dr. Ashok

OK, I gave it a try on a test page and realized that there was one other CSS rule that you would need to add. The #logo-area is pre-defined with a margin-left property of 20px, so you have to reset it by adding this CSS:

Code:

#logo-area {

   margin-left: 0;

}

After the banner row, you can then add another row that holds two widget areas, one for the Search widget and the other for the Categories widget.

Hi CrouchingBruin,
This is the best I could do for my post (NSFW). Compare this to your test page, which is precise. I am disappointed with my handicraft.

I don't prefer keeping mobile menu for larger screens if it is going to look like this one (almost like Categories). A folded menu on the sidebar would do.
My long menus on Montezuma have to fold one line over the other. Then the drop down menu on upper row becomes inaccessible.

Montezuma's box model captivated me. It mislead me in believing it would be easy to move things from one place to another. Some of my difficulties were like below.

<?php get_searchform(); ?> this doesn't print anything by itself.

I couldn't find precise codes, example for categories. The categories drop down menu I managed is not like the one we see in a widget.

I wish I could pluck stuff between the <div> - widget -< /div> to move.

Quote:

I wanted 100% mobile compliant theme.
Search, Categories, Nav Menu and 'translate in your Language' all in the header leaving the canvas wide for the post.

I will have to learn more. Kindly guide me.

I'm not sure why your header widgets are showing two icons instead of one. When I display the widget titles in my header, I only get one.

Quote:

<?php get_searchform(); ?> this doesn't print anything by itself.

If you do a search in the forum, you'll find this post which explains that there is a syntax error for get_search_form() in the documentation. That is, you should use:

Code:

<?php get_search_form(); ?>

(put an underscore between search and form).

Quote:

The categories drop down menu I managed is not like the one we see in a widget.

You probably selected different options for the two different widgets. For example, if you go to your sidebar widget, it looks like you checked off "Display as dropdown," "Show post counts," and "Show hierarchy." If you did the same thing for the header widget, it should look the same.

Quote:

I wish I could pluck stuff between the <div> - widget -< /div> to move.

Exactly what are you trying to move, and where? You can move some things around using CSS, but it's fairly limited.

Quote:

I wanted 100% mobile compliant theme.
Search, Categories, Nav Menu and 'translate in your Language' all in the header leaving the canvas wide for the post.

The theme is fully responsive so there should be no issues with regards to mobile compatibility, as long as you remember to use the proper col# class names and you don't try to set explicit widths for your elements (i.e., don't set the width of an image to 640px and expect it to resize properly). Your main problem is going to be the navigation menu, because you have so many items and the menu items themselves have a lot of characters in them. You would have the same problem with any theme you choose. There is just so much room across the width of the page. As I mentioned earlier, you can try using a menu in a side bar (left or right side); you just have to learn how to add some CSS to style it correctly. You can see a sample on this page.

Quote:

I will have to learn more. Kindly guide me.

It seems like you were able to manage quite a bit on your own, creating the widget areas in the header. And it looks like you got the tag line next to the site title. The best advice I can give you is to really understand HTML and CSS well. There are good tutorials here. And you have to understand how CSS Specificity works. Then you should learn how to use a web debugging tool like Firebug or Chrome Developer Tools. Those tools will help you see what rules are in effect for a particular element, plus you can play around in real-time with the CSS settings before you actually make the change in your various.css file. Lastly, I would suggest looking at some of the sites in the showing off thread for ideas that you might want to try. Some of the sites are no longer using Montezuma, but most of them still are.

Hi CrouchingBruin,
I had seen your sites. The showing off thread was the one I was looking for.

With this advice "really understand HTML and CSS well" you have hit the bulls eye (thank god you didn't mention php).

I haven't seen such prompt attention to user's difficulties in any other forum. I appreciate your insightful replies and your encouragement.

I have clicked all the links you provided.
If you have any other suggestions any time I welcome them.

Thanks for being,

Regards,
Dr. Ashok

Hi CrouchingBruin,
Good morning.

You correctly said in the side bar I

Quote:

checked off "Display as dropdown," "Show post counts," and "Show hierarchy."

to get the category menu.

Quote:

I wish I could pluck stuff between the <div> - widget -< /div> to move.

means I am not able to find codes for Categories, Custom Menu, Most Shared Posts, Tag Clouds, Meta Sliders and other widgets that I see in wp-admin/widgets.php I am not able to find these in wordpress templates either. Then box sizing: border box would facilitate placing these widget material appropriately.

I am reading about CSS Flex at w3schools.com. Is it similar to the box model?

I am still fumbling with the categories code.

Thanks,

Dr. Ashok

By "codes," do you mean shortcodes, like [custom_menu]? There are no shortcodes available for those default Wordpress widgets that would allow you to put a widget anywhere you want. There are some plugins that provide both a shortcode version and a widget version, but the plugin developer has to build in that capability. However, one of the feature of Montezuma is that it allows you to create a widget area wherever you need, so you can place a widget wherever you want. That's how you were able to get the Category widget and the search widget in the header.

Box sizing only has to do with making it easier to calculate the width of a web element. Let's say you have a DIV that is set to 960px wide, and you want have two DIVs inside that fit side-by-side, the first one with a width of 600px and the second one with a width of 360px. The way you would typically do that is to set the width property of the two internal DIVs to 600px and 300px like this:

Code:

#container {

   width: 960px;

}

#div1 {

   float: left;

   width: 600px;

}

#div2 {

   float: left;

   width: 360px;

}

So the two internal containers should sit side-by-side since their combined widths is the same as it's containing element.

However, let's say you want to draw a border around one of the two internal containers, plus you want some padding so the text isn't right next to the edges of the container:

Code:

#container {

   width: 960px;

}

#div1 {

   float: left;

   width: 600px;

}

#div2 {

   float: left;

   width: 360px;

   border: 2px solid black;

   padding: 5px;

}

Without box sizing, what will happen is that the border and padding will contribute to the width of the container, such that the calculated width will be:
360px (width of div2 contents)
+ 4px of border (2px on left & 2px on right)
+ 10px of padding (5px on left & 5px on right)
= 374px
So the second DIV will be "forced" below the first DIV since the combined widths of the two inside DIVs no longer fits inside the containing element. The way you would normally "fix" this is to decrease the width property to take the border & padding into account:

Code:

#div2 {

   float: left;

   width: 336px;

   border: 2px solid black;

   padding: 5px;

}

As you can see, this can be a pain, you shouldn't have to continually set the width of the element if the border & padding changes.

By setting box-sizing to border-box, the space taken by any borders or padding is taken into account when the browser sets the width of the container. That is, with box sizing, the browser will adjust the amount of space for the div contents so that the overall width of the element will still be 360px.

Code:

#div2 {

   float: left;

   box-sizing: border-box;

   width: 360px;

   border: 2px solid black;

   padding: 5px;

}

Quote:

I am reading about CSS Flex at w3schools.com. Is it similar to the box model?

The flex properties allow you to position, size, and re-order web elements a bit more easily than using floats.

For example, with the flexbox model, you can re-order the sequence of web elements independent of the sequence that they were output. As an example, let's say you have a page with a sidebar on the left, the main content area in the middle, and a sidebar on the right, and they are output in this order:

Code:

<div id="leftSidebar">...</div>

<div id="content">...</div>

<div id="rightSidebar">...</div>

In a responsive site using floats, what would normally happen if you view the page on a mobile device, like a smart phone, is that all the elements would be stacked on top of one another based upon the sequence that the elements were output. So the left sidebar would appear at the top, the main content under it, and the right sidebar under the main content.

With the flexbox model, it would be easier to specify that the left sidebar comes after the main content and before the right sidebar on a smaller viewport. You can read more about the flexbox model here and here. You can probably incorporate this into Montezuma, you'll just have to set the display property of any block level container to flex. Also, it doesn't sound like it is uniformly implemented yet across different browsers, so you will have to take that into consideration. I think I'll try playing around with it for certain situations.

Hi CrouchingBruin,
This is getting interesting.

Yes, I did mean

Quote:

create a widget area wherever you need

With your feedback I will have a closer look at flex.

I am making improvements and it is getting better and better.

I truly appreciate your valuable support.

Best regards,
Dr. Ashok