I'm having trouble centering the top menu of a template, someone could give me a hint of what I do?
The template: http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/dashboard.html
(Need to change the config in right icon to top menu)
Image explanation
I tried to change float: left without success, text-align in 'li' without success...
Thanks.
We have no access to your code to be sure, but try to add that to your css
.navbar-nav {
width: 100%;
text-align: center;
> li {
float: none;
display: inline-block;
}
}
it should work, but let me know
Related
Unable to set the main nav to right align. Please see site: accessatx.com. Also, can it be set to be inline with the logo (under the button)?
Using Wordpress, theme: Avada. Tried float: right in CSS and failed.
change in your css like this
.fusion-header-banner{
padding-top: 19px;
}
#menu-main{
display: inline-block;
float: right;
}
output you get like this
I have some CSS problem. On the website http://astrazlata.rs/ on the accordion section "Finansijski izveštaji", how can I make text inside that section center on the page, so that is not align to the left? I tried few ways with text-align:center or margin: 0 auto, but it want works.
Also I on the accordion I have some problem with:
ul {
list-style: circle;
}
When I leave it like that, page push that circle bullets little bit outside the section (it looks ugly and unclean), but it nicely displays text.
Other scenario is when add:
ul {
list-style: circle inside;
}
circle bulltets are displayed perfectly in the line with the section but text acts little bit funky like this - https://www.dropbox.com/s/pb3kxmfjod3084d/bullets%28text%29.png?dl=0
Is there any way to solve that problem, so that circle bullets are in line with section, but without the funky looking text?
For the first part of your question.
https://jsfiddle.net/wieslaw/y26k6amu/.
Answer to your question is also in https://stackoverflow.com/a/14510696/1643235.
.container {
text-align: center;
}
ul {
display: inline-block;
}
add following code into your style.css file:
.accordion-content ul {
position: relative;
left: 50%;
}
you can adjust 50%; value to whatever you like.
After playing around with my header and and main menu it seems the link box is not actually aligned with the text. I tried playing around with margins and padding but I can't seem to get it to work or find the right class. I would like to keep everything where it is currently and just move the link areas to the right so everything aligns. Any input is appreciated.
Website: http://museiam.ca/
This is happening because you have:
.main-navigation ul li a, .menu_centered_style .gbtr_first_menu li
{
left: 40px;
}
Removing the left: 40px; should fix this.
EDIT: Try adding the following styles
.menu_centered_style .gbtr_first_menu ul
{
margin-left: 108px;
}
.menu_centered_style .gbtr_first_menu .shopping_bag_centered_style_wrapper
{
margin-left: -24px;
}
I'm using a Mediawiki Bootstrap theme and have managed to center the nav pills. However, now when you click on the Search button to expand it, the search box moves up a bit. The site is here.
I tried making the height of the nav pills section bigger as I thought maybe it just couldn't fit, but that didn't help any.
Any ideas?
The alignment of the search box is coming from the CSS style
#media screen {
.navigation .navbar-search {
display: inline;
float: none;
position: relative;
top: -2.25em;
}
}
If you set the top to 0px the alignment looks good to me.
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.