Top Menu Question

I am trying to have the top menu buttons at a constant width instead of getting wider as I remove menu buttons ....Any Idea on how to do this ...??

The width of these are generated by code at run time. To change it you would need to edit a few sections in templates\base\scripts\BxBaseMenu.php


At about line 164 you will find this.

function genTopHeader() {
$iCurrent = $this->checkShowCurSub() ? 0 : $this->aMenuInfo['currentTop'];
$this->sCode .= '<table class="topMenu" cellpadding="0" cellspacing="0" style="width:' . $this->sWidth . '"><tr>';
}


If you change it to this.

function genTopHeader() {
$iCurrent = $this->checkShowCurSub() ? 0 : $this->aMenuInfo['currentTop'];
$this->sCode .= '<table class="topMenu" cellpadding="0" cellspacing="0"><tr>';
}


That will let the top menu items drop to the smallest size possable. It will be centered.

Another location will allow you to set the mininum width of the buttons.

That is located at about line 774

function GenMoreElementBegin() {
$sMoreIcon = getTemplateIcon("tm_sitem_down.gif");

$sMoreMainIcon = getTemplateIcon('tm_item_more.png');

$this->sCode .= <<<EOF
<td class="top" style="width:38px;">


You can change the 38px shown there to say 100px and the buttons will not get smaller than that.

There are a number of things that can be done. All will require playing with the code in this file and others some CSS adjustments.

Thanks

I did shrink the menu and it center aligned, but I would like to have more tabs showing since there is a lot of room now the MIN size was setup. Any suggestions on how to make more tabs appear instead of in the EXTRAS tab at the end of the menu?

You can go into Admin Panel>Settings>Advanced Settings>Other and change :

The number of elements in the navigation menu which will be desplayed before the More link for logged in members.: ##

replace the ## with how ever many items you want to display on your menu. Right under that is the one for visitors (not logged in) :)

Chris

HI

How do I get the menu to align right instead of center once i shrink my menu using deano92964's suggested method ??? Does any one know????

Aligning right will not be simple. Here is the reason why. Unless you understand CSS you might not get this.

The topMenu table is contained inside the div sys_top_menu which is the full width of the browser, not the page width. This div is what contains the background image that goes across the entire browser width.

The menu table topMenu has a CSS margin setting of 0 auto. which automatically keeps it centered regardless of the width of the browser. If you attempt to align it right it will align to the right side of the div it's contained in which will place it at the right edge of the browser window and not the right edge of the page. If that is what you want then you can do this.

Edit templates\base\css\top_menu.css at about line 17.

Find this.

table.topMenu {
margin: 0px auto;
position:relative;
z-index:1;
}


Replace with this.

table.topMenu {   
margin-left: auto;
margin-right: 10px;
position:relative;
z-index:1;
}




This is the simple way. But i don't think it will get the affect you are looking for. If you want the menu aligned with the right of the page content and not the right of the browser window then this will require some more source edits to add a new div to contain the menu in.

If thats what you need then let me know. I will write up some code changes.

You are are absolutely right ..What I want is to align it to the right of the page content  not the browser ....Any ideas on the code for this ..

Thanks...

To be able to align the menu to the right of the page content and not the browser will require a new div be added to contain the menu.

Modify templates\base\scripts\BxBaseMenu.php

Look for this at line 164

function genTopHeader() {
$iCurrent = $this->checkShowCurSub() ? 0 : $this->aMenuInfo['currentTop'];
$this->sCode .= '<table class="topMenu" cellpadding="0" cellspacing="0" style="width:' . $this->sWidth . '"><tr>';
}

Add the line marked in green so it looks like this.

function genTopHeader() {
$iCurrent = $this->checkShowCurSub() ? 0 : $this->aMenuInfo['currentTop'];
$this->sCode .= '<div class="topMenuCont" style="width:' . $this->sWidth . '">';
$this->sCode .= '<table class="topMenu" cellpadding="0" cellspacing="0" style="width:' . $this->sWidth . '"><tr>';
}

Then look for this at line 255

function genTopFooter() {
global $oSysTemplate;

$sResult = '';
$aFuncti alt= array('genMoreLanguagesElement', 'genMoreTemplatesElement', 'genSearchElement');
foreach($aFunctions as $sFunction) {
$aVariables = $this->$sFunction();
if(!empty($aVariables)) {
$aVariables['right'] = empty($sResult) ? 'right' : '';
$sResult = $oSysTemplate->parseHtmlByName('navigation_menu_item.html', $aVariables) . $sResult;
}
}       
$this->sCode .= $sResult . "</tr></table>";
}


Add the line marked in green so it looks like this.

function genTopFooter() {
global $oSysTemplate;

$sResult = '';
$aFuncti alt= array('genMoreLanguagesElement', 'genMoreTemplatesElement', 'genSearchElement');
foreach($aFunctions as $sFunction) {
$aVariables = $this->$sFunction();
if(!empty($aVariables)) {
$aVariables['right'] = empty($sResult) ? 'right' : '';
$sResult = $oSysTemplate->parseHtmlByName('navigation_menu_item.html', $aVariables) . $sResult;
}
}       
$this->sCode .= $sResult . "</tr></table>";
$this->sCode .= '</div>';
}


Now add the following code to the bottom of templates\base\css\top_menu.css

.topMenuCont {
margin: 0px auto;
position:relative;
z-index:1;
}

Now edit templates\base\css\top_menu.css at line 17

Find this.

table.topMenu {
margin: 0px auto;
position:relative;
z-index:1;
}


Replace with this.

table.topMenu {  
margin-left: auto;
margin-right: 0;
position:relative;
z-index:1;
}



That should do it. I tested this on my site before i posted it. Works fine.

WORKS !!! like a charm ...Thanks you ROCK!!!!!

Cheari

Deano you are awesome.

I was trying for to get this right for many hours.

You made my day again :)

The header is fine now but by editing the code like below i skrewed up the calendar on the profile edit form.

Now i'm unable to enter any date manualy and the popup calendar does not pop anymore.

Deano do you have any idea why?

I am using dolphin 7.07 so the code changes in this topic could be to old for my site.

Hope you or anybody here can help

Ok i have solved the problem so far.

This is what i did:

I have moved the </div> down  to:

    /*
    * Generate sub container footer
    */
    function genSubContFooter() {
            $this->sCode .= '</div>';
                        $this->sCode .= '</div>';
    }

Hope theres not a new problem now but it seems like everything is working fine now

 Does this work in 7.0.8? I would like to have the top bar menus at a width closer to the drop down menu size.

-edit- nope. I tried and it realigns the menu to the left of the page.