Update: How to Move the Menu Bar Above the Header Frame?

Started by dopeitspaul, July 30, 2014, 12:56:30 PM

Previous topic - Next topic

dopeitspaul

Hey everyone, appreciate all the help that you guys have been giving me recently.
I'm back with another.

This time I'm trying to work on my navigation bar.

There's already problems. I tried adding my own div on the indextemplate. But nothing happened.

Here's what I'm trying to make it look like



Any help? Thanks!

dopeitspaul

Alright guys, here's an update on my work

Here's what it looks like now


Maybe this will help solve my problem.

Now, I want to learn how to move the navbar above the header frame.

Note: I don't want to move the navbar all the way on top of the page, just above the header frame.

Any help? Thanks

Hj Ahmad Rasyid Hj Ismail

That will be easy. At least I think it is. All you need is just css edit. You can check what I did in my coming theme used in anypost.qom.my. I will share the code on how to do that here once I am in front my PC.

dopeitspaul

Alright cool thanks man.

I was playing around at the CSS.
Added margin-top: -270px;

The menu bar went on top. But everytime I click the  collapse button it disappears along with the avatar

Sir Osis of Liver

Look for this in index.template.php -



// Show the menu here, according to the menu sub template.
template_menu();




Move it here -



function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">';

template_menu();

echo '
<div id="top_section">



This is in Curve, the header structure varies in different themes, but you should get the general idea.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Hj Ahmad Rasyid Hj Ismail

Quote from: dopeitspaul on July 31, 2014, 12:12:36 AM
Alright cool thanks man.

I was playing around at the CSS.
Added margin-top: -270px;

The menu bar went on top. But everytime I click the  collapse button it disappears along with the avatar

That's the idea. You can try this one to move it to top with some background, bottom border and some paddings:

#main_menu
{
padding: 0.7em 0.5em 0.5em;
float: left;
margin: 0;
background: #eee;
border-bottom: 2px solid #333;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}


You might need to adjust your header a bit something like this:
/* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
padding-left: 20px;
margin: 2em 0 -5em;
}


No need to move or modify index or any template code this way. Simply css.

(I hope I can do this in Display template as well but it is not so easy. :P )

Ant surely have a lot of ideas on this. ;)

Sir Osis of Liver

Actually, this should do what you want -



function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '

', template_menu() ,'

<div id="header"><div class="frame">



Puts it above the upshrink.  Just needs a little top padding.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

dopeitspaul

Quote from: Krash on July 31, 2014, 12:58:51 AM
Actually, this should do what you want -



function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '

', template_menu() ,'

<div id="header"><div class="frame">



Puts it above the upshrink.  Just needs a little top padding.

Tried this solution, but there's a problem. The collapse menu and title forum is gone


Hj Ahmad Rasyid Hj Ismail

dopeitspaul, frankly speaking, I have been through this path before. So far that I know, it won't work inside the wrapper. Simply moving it outside it, won't solve this either. My suggestion in post #5 is tested and works. Only a CSS mod without a need to modify index or other templates. But, of course, that is totally up to you. ;)

dopeitspaul

Quote from: ahrasis on July 31, 2014, 03:58:20 AM
dopeitspaul, frankly speaking, I have been through this path before. So far that I know, it won't work inside the wrapper. Simply moving it outside it, won't solve this either. My suggestion in post #5 is tested and works. Only a CSS mod without a need to modify index or other templates. But, of course, that is totally up to you. ;)

I tried doing it but it wasn't the result I want.
I just want my menu to be on top of the header, but not all the way on top which was the css resulted.

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters


Sir Osis of Liver

Your index.template.php works fine in Curve.  Menu is at top, above forum title and upshrink.  Which theme are you using?
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters


Hj Ahmad Rasyid Hj Ismail


Hj Ahmad Rasyid Hj Ismail

Quote from: dopeitspaul on July 31, 2014, 01:51:55 PM
I tried doing it but it wasn't the result I want.
I just want my menu to be on top of the header, but not all the way on top which was the css resulted.
Sorry, my mistake. Then moving menu code as suggested by Krash is your answer.

dopeitspaul

^ Yeah, I been trying to play around with it. Still no solution to the way I want it.

If anything, I think I might remove the header frame, put the logo on the very top of the page. And get rid of the collapse avatar section.

Sir Osis of Liver

The index.template.php you attached does exactly what you're trying to do in Curve with default css.  You may have caused a problem by tinkering with the css.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

dopeitspaul

Thanks for the help guys I got it the way I wanted it to look.


Before I wrap this thread up, I have one more question. I figured I should ask now instead of making another thread about it.

When youre on the "my messages" page, the width of the page is slighty wider than when youre on the index page.

Here's a video I recorded.
https://www.youtube.com/watch?v=FBNAuiH6i9Q

Pay attention to the right side edge of the context. Or you can pay attention to the logo. You can tell the width is different from "My Messages" to "Home"

Is there a solution to not make that happen? I want everything to be still

Thanks!!!!


Hj Ahmad Rasyid Hj Ismail

No. I think they are just the same. The difference is only when you have longer content as a scroll bar will automatically appear on the right side. That is by browser, not by SMF. If you have longer content in your message page, it will also have the scroll bar.

Advertisement: