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;
}
Related
I made some customization on my site, but noticed one issue that i cant resolve. Because main menu have fixed width, now main menu, and search and cart icons are overlapping with main menu, making contact page unaccessible. So how to make main menu, a little to left, so contact page will be usable ?
This is CSS from that part:
.wr-megamenu-container ul.wr-mega-menu {
z-index: 9999;
float: left;
margin: 0;
padding: 0;
width: 100%;
}
May be you should try to reduce the padding of each menu element, this way:
.header-primary-nav .wr-mega-menu.nav-menu> li >a { padding: 0 8px;}
Then you will also need to change your menu float rule from right to left this way:
.logo-wrapper .header-primary-nav, .logo-wrapper .hgroup-sidebar { float: left; }
This should solve your issue…
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
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.
I want to have a top nav that looks something like this:
div = [] , space = .
[[menu-icon][logo]....[page title].....[some-icon][some-icon]]
so the menu and logo area stick to the left.
the page title in the middle.
2 more icons that stick to the right.
I tried a couple of ways but none worked for me.
My best solution had everything in place but then the links/icons were not clickable, the text was "over" them.
appreciate any help.
Here's my plunker of it:
http://plnkr.co/edit/CBnH6Ewa4QJTu5FBC2Mi
======EDIT=====
thanks to #Mark Simpson , i fixed a typo in the css and have the title bar centered and links clickable by using z-index:-1 on the centerpiece.
but I'd the title like it to be clickable too.
I use this on some pages.
Any suggestions on how to solve this with css?
.navbar .center {
width: 60%;
margin: 0 auto;
text-align: center;
}
.navbar .right {
position: absolute;
right: 0;
top: 0;
}
See: http://plnkr.co/edit/1XLrK4Iuq6CPSYmGPDYn?p=preview
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.