News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[Help] Trying to center menu bar on certain theme

Started by mindseye, February 07, 2017, 12:45:17 AM

Previous topic - Next topic

mindseye

Hello everyone,

I apologize to do this but I am needing some help. I am using the Black Ops theme (http://custom.simplemachines.org/themes/index.php?lemma=2617) by Akyhne (who is no longer registered) and am trying to center the menu bar to the middle as we are using it on our main site as well.

I've been able to center the menu bar, but the hover drop downs then break and either popup way to far away, or are broke down the middle.  I've attached the theme onto this thread as well as an image of what it looks like currently on our site and any help would be GREATLY appreciated.

Thanks for your time,

Mindseye

Linkjay

Aw yes, this is something I finally conquered after a lot of Googling and trying different things out. I finally got one that works on my forums currently. (Link) The one that finally worked for me was going to my main button strip's CSS class in my theme's index.css, in my case it was called "navigation", and giving it the attribute "text-align: center;".

If you could link your site here, I could take a look at it and see if my solution would work.
I play games in my free time and volunteer my knowledge and support to the gaming communities of the internet.

You can contact me by these methods:
Use my Contact Script • PM me here • Add me on Steam

mindseye

#2
Quote from: Linkjay on February 07, 2017, 01:17:25 AM
Aw yes, this is something I finally conquered after a lot of Googling and trying different things out. I finally got one that works on my forums currently. (Link [nofollow]) The one that finally worked for me was going to my main button strip's CSS class in my theme's index.css, in my case it was called "navigation", and giving it the attribute "text-align: center;".

If you could link your site here, I could take a look at it and see if my solution would work.

I tried to PM you the link to the forum but it said it was blocked. Here is a link to the forum so far:

https://ayd4.com/forum/ [nofollow]

We have not had the front page go live yet but if you need that let me know and I can PM that to you. Thanks again

Edited: just checked out your site, very nice!

Linkjay

Thank you very much. I tried my solution on your page and it would not work. However, you can accomplish it by doing this:

Go into your index.css and find and replace these two classes:


#main_menu {
    padding: 0 0.5em;
    float: left;
    margin: 0;
    width: 98%;
}


with:


#main_menu {
    padding: 0 0.5em;
    float: left;
    margin: 0;
    width: 98%;
    position: relative;
}


then


.dropmenu {
    padding: 0 0.5em;
}


with:


.dropmenu {
    padding: 0 0.5em;
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}


Screenshot

and then it should be completely centered. :)

EDIT: If you want to fix the home button not having a border, add this to the bottom of your index.css file:


#button_home
{
border-left: 1px solid #393939;
}


;)
I play games in my free time and volunteer my knowledge and support to the gaming communities of the internet.

You can contact me by these methods:
Use my Contact Script • PM me here • Add me on Steam

mindseye

You are fantastic! You don't know how long I have been trying editing different sections to get it to work.

One other question if you have a moment some time in the future, no rush at all. When the browser is full screen it looks fantastic, but when you start to minimize it the text jumps out of the bar at the top and places it self below. Do you know of any way to either have the bar in the back get larger or should we not even worry about it?

Thank you again!!

Linkjay

Quote from: mindseye on February 07, 2017, 02:25:08 AM
You don't know how long I have been trying editing different sections to get it to work.

I feel your pain completely. I spent literal hours trying to get my topbar to center dynamically.

Quote from: mindseye on February 07, 2017, 02:25:08 AM
One other question if you have a moment some time in the future, no rush at all. When the browser is full screen it looks fantastic, but when you start to minimize it the text jumps out of the bar at the top and places it self below. Do you know of any way to either have the bar in the back get larger or should we not even worry about it?

I myself have been trying to fix this issue on my forums. If someone could share a better solution than the two I have provided, that would be absolutely amazing. There are two solutions which aren't completely ideal, but work nonetheless.

You could add "overflow: hidden;" to the "div#top_menu" class but that would make any buttons that go off hide inside of the bar until the bar gets re-maximized. The other would be doing the exact same thing but instead of "overflow: hidden;" it would be "overflow: scroll;" which just makes a scrollbar so you can scroll down. The scroll one doesn't look very nice and the hidden one would remove some functionality because some essential buttons would be hidden until the button strip retained decent size. Up to you.
I play games in my free time and volunteer my knowledge and support to the gaming communities of the internet.

You can contact me by these methods:
Use my Contact Script • PM me here • Add me on Steam

mindseye

Quote from: Linkjay on February 07, 2017, 02:30:42 AM
I myself have been trying to fix this issue on my forums. If someone could share a better solution than the two I have provided, that would be absolutely amazing. There are two solutions which aren't completely ideal, but work nonetheless.

You could add "overflow: hidden;" to the "div#top_menu" class but that would make any buttons that go off hide inside of the bar until the bar gets re-maximized. The other would be doing the exact same thing but instead of "overflow: hidden;" it would be "overflow: scroll;" which just makes a scrollbar so you can scroll down. The scroll one doesn't look very nice and the hidden one would remove some functionality because some essential buttons would be hidden until the button strip retained decent size. Up to you.

I see what you are talking about with the overflow: scroll, it definitely breaks up the flow.  When I tried the overflow: hidden; it actually hid the entire bar on this template theme so that nothing showed at all lol.

Thanks for all of the help.


Antechinus

This isn't hard to fix. The relative positioning trick works for centering (it was the first one I used way back when) but it's not necessary and it's not the most flexible solution.

The best option is to use text-align: center; to do the centering. What usually stops it working is the float: left; that a lot of themes (including the 2.0.x default) use in their menus. If you get rid of the float, no problem.

So if this is the original code:

#main_menu {
    padding: 0 0.5em;
    float: left;
    margin: 0;
    width: 98%;
}


All you have to do is change it to this:

#main_menu {
    padding: 0 0.5em;
    margin: 0;
    text-align: center;
}


If the ul or the li's inside #main_menu have float: left; set on them, get rid of it there too. You will also need to set text-align: left; on the drop menus to put their text back where it should be.

For the breakout problem on narrow screens, just don't set a fixed height on the menu bar. If it is not limited to a fixed height, it will expand in height to encompass all the buttons. Easy. :)

Linkjay

Quote from: Antechinus on February 07, 2017, 03:12:07 AM
For the breakout problem on narrow screens, just don't set a fixed height on the menu bar. If it is not limited to a fixed height, it will expand in height to encompass all the buttons. Easy. :)

I did this before too but it overlaps my logo. Anyway to make it push down the logo?

Example on my site:


I also did what you said to do to center the buttons and I came out with this on his site:
I play games in my free time and volunteer my knowledge and support to the gaming communities of the internet.

You can contact me by these methods:
Use my Contact Script • PM me here • Add me on Steam

Antechinus

Ah. If your menu uses fixed positioning that throws a spanner in the works, because fixed positioning prevents it from pushing the rest of the site down (basically, it's hauled out of the usual flow and sits over the top). So you would have to use workarounds if you want a fixed menu.

Your basic problem is that you are going to have to predict the height the menu will need on any given screen. If you can do that, you can compensate with the positioning of other elements. So if you need one line for your menu on a 1920 screen, but 3 lines on a 480, you'd use media queries to change the top margin on your banner to match the menu height.

Does that make sense?

Antechinus

Quote from: Linkjay on February 07, 2017, 03:17:57 AM
I also did what you said to do to center the buttons and I came out with this on his site.

Ok, that's caused by the li's being set to display: block. Changing them to display: inline-block; should sort it.

Linkjay

Quote from: Antechinus on February 07, 2017, 03:26:44 AM
Ah. If your menu uses fixed positioning that throws a spanner in the works, because fixed positioning prevents it from pushing the rest of the site down (basically, it's hauled out of the usual flow and sits over the top). So you would have to use workarounds if you want a fixed menu.

Your basic problem is that you are going to have to predict the height the menu will need on any given screen. If you can do that, you can compensate with the positioning of other elements. So if you need one line for your menu on a 1920 screen, but 3 lines on a 480, you'd use media queries to change the top margin on your banner to match the menu height.

Does that make sense?

Right. I get the first part on how the positioning for the header is not dynamic and wont affect the rest of the site. I don't quite get your theory for the solution to that though.


Quote from: Antechinus on February 07, 2017, 03:28:10 AM
Quote from: Linkjay on February 07, 2017, 03:17:57 AM
I also did what you said to do to center the buttons and I came out with this on his site.

Ok, that's caused by the li's being set to display: block. Changing them to display: inline-block; should sort it.



That worked, nice job. Now how is the different/better than my solution? It seems to be the same amount of work and gives the same product out.
I play games in my free time and volunteer my knowledge and support to the gaming communities of the internet.

You can contact me by these methods:
Use my Contact Script • PM me here • Add me on Steam

Antechinus

Quote from: Linkjay on February 07, 2017, 03:28:50 AMRight. I get the first part on how the positioning for the header is not dynamic and wont affect the rest of the site. I don't quite get your theory for the solution to that though.

Ok. Say your menu at one line is 70px tall. Your banner will have a 70px top margin, or something similar, so that it clears the menu. If you want a three line menu on a narrow screen, you'll need to change the top margin on the banner to 210px so it clears the menu. You do this with media queries.



QuoteThat worked, nice job. Now how is the different/better than my solution? It seems to be the same amount of work and gives the same product out.

It's a bit more flexible. For a start, it gives automatic RTL support if a site needs that (probably not important for your site). It also keeps all buttons centered when the menu breaks to two or more lines. The relative positioning trick jams the buttons up against the left side of the screen if the menu if forced to break to more than one line.

Linkjay

Quote from: Antechinus on February 07, 2017, 03:37:24 AM
Ok. Say your menu at one line is 70px tall. Your banner will have a 70px top margin, or something similar, so that it clears the menu. If you want a three line menu on a narrow screen, you'll need to change the top margin on the banner to 210px so it clears the menu. You do this with media queries.

Okay so if I want to push it down could I put a slight like 50px margin or something after the buttons so that it pushes the logo down to make room? Basically all I need to do is detect an overflow where it goes into the next row, then use PHP to echo out a CSS margin after the button strip or something to push everything down to clear the way for the buttons. Will that work?


Quote from: Antechinus on February 07, 2017, 03:37:24 AM
It's a bit more flexible. For a start, it gives automatic RTL support if a site needs that (probably not important for your site). It also keeps all buttons centered when the menu breaks to two or more lines. The relative positioning trick jams the buttons up against the left side of the screen if the menu if forced to break to more than one line.

Yeah, I am going to implement this to my site too. Thanks for sharing this.
I play games in my free time and volunteer my knowledge and support to the gaming communities of the internet.

You can contact me by these methods:
Use my Contact Script • PM me here • Add me on Steam

Antechinus

Quote from: Linkjay on February 07, 2017, 03:45:58 AM
Quote from: Antechinus on February 07, 2017, 03:37:24 AM
Ok. Say your menu at one line is 70px tall. Your banner will have a 70px top margin, or something similar, so that it clears the menu. If you want a three line menu on a narrow screen, you'll need to change the top margin on the banner to 210px so it clears the menu. You do this with media queries.

Okay so if I want to push it down could I put a slight like 50px margin or something after the buttons so that it pushes the logo down to make room? Basically all I need to do is detect an overflow where it goes into the next row, then use PHP to echo out a CSS margin after the button strip or something to push everything down to clear the way for the buttons. Will that work?

No. :D I'd have to look at your existing markup and CSS to know exactly how your theme handles it. However, it's definitely not related to any margin after the buttons.

The markup for the menu could be anywhere in the template. If it's set to fixed positioning, the menu markup could be after the footer and would still appear at the top of the page. In other words, setting margins after the buttons won't have any effect.

The margin, or possibly padding, or possibly some other trick depending on what the theme author used, needs to be changed on the actual theme header. Which is not hard to do. You don't need PHP for it. It can all be done with CSS, providing all members need the same number of lines for the menu.

IOW, it could break down if you had stacks of buttons for staff and not many for guests. That situation could require a bit of PHP to handle it, but you'd still do it mostly by CSS.

Linkjay

Quote from: Antechinus on February 07, 2017, 03:55:31 AM
Quote from: Linkjay on February 07, 2017, 03:45:58 AM
Quote from: Antechinus on February 07, 2017, 03:37:24 AM
Ok. Say your menu at one line is 70px tall. Your banner will have a 70px top margin, or something similar, so that it clears the menu. If you want a three line menu on a narrow screen, you'll need to change the top margin on the banner to 210px so it clears the menu. You do this with media queries.

Okay so if I want to push it down could I put a slight like 50px margin or something after the buttons so that it pushes the logo down to make room? Basically all I need to do is detect an overflow where it goes into the next row, then use PHP to echo out a CSS margin after the button strip or something to push everything down to clear the way for the buttons. Will that work?

No. :D I'd have to look at your existing markup and CSS to know exactly how your theme handles it. However, it's definitely not related to any margin after the buttons.

The markup for the menu could be anywhere in the template. If it's set to fixed positioning, the menu markup could be after the footer and would still appear at the top of the page. In other words, setting margins after the buttons won't have any effect.

The margin, or possibly padding, or possibly some other trick depending on what the theme author used, needs to be changed on the actual theme header. Which is not hard to do. You don't need PHP for it. It can all be done with CSS, providing all members need the same number of lines for the menu.

IOW, it could break down if you had stacks of buttons for staff and not many for guests. That situation could require a bit of PHP to handle it, but you'd still do it mostly by CSS.

Agh, meant to refer to padding. I will play around and see what I can make up to work with this.
I play games in my free time and volunteer my knowledge and support to the gaming communities of the internet.

You can contact me by these methods:
Use my Contact Script • PM me here • Add me on Steam

Advertisement: