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…
Related
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 have a site that I am working on.. and would like to know how to span the menu items evenly across the menu bar.
I know how to do it technically, but I want to make sure it's correct.
I want to be able to add another menu item and still have it look normal or overflow properly, etc.
The site is http://phillysuburbanhomes.com
Okay, so I added
.wpsight-menu li {
width:14%;
text-align:center
}
(more menu items were added)
My issue now is, that the full menu item doesn't show now
http://phillysubrubanhome.com - you can see what it's doing live
Currently there are 5 menu items, im assuming you would be adding another menu item thus making it 6 menu items.
The width of the container is 980px. Divide it in 6 parts which comes to 163.33. We need to give the width in percentage i.e 16.66%.
Set the width for each li as 16.66% and center-align the text.
Your css would be as follows:
ul#main-menu li{
width:16.66%;
text-align:center
}
Okay so I combined one of your methods with this this and it worked:
.wpsight-menu li {
width:14%;
text-align:center
}
.wpsight-menu a {
display: inline-block;
margin: 0 5px 0 0;
text-decoration: none;
}
Use CSS to give your anchors (a) the same padding and margins on the left and right and a percentage width of the li, like this;
ul#main-menu {
width: 100%;
}
ul#main-menu li {
width: 20%; /* for 5 menu items */
padding: 0;
margin: 0;
display: inline-block;
}
ul#main-menu li a {
padding: 0px 5px;
margin: 0px auto;
display: block;
}
and change the width of the li depending on the number of menu items.
That should do the trick!
I am trying to make the page linked responsive, specifically the menu bar. I've added the following CSS hoping to make the menu responsive but as soon as I drag the page down past about 1140 px width a gap appears between the menu bar and the slider above it. This gets progressively wider the narrower the page gets. Is there anyway to fix this ?
The font property is not having any effect, I've looked in the CSS file but cannot find the ID or class that controls font size in the menu ?
Page link: http://dbtest.destinationballybunion.ie/?page_id=2160
Here's the CSS I've added:
#access {
background: url('http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/05
/new-menu-back1.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-size: contain;
}
#access {
position: absolute;
top: 4.35%;
left: 0%;
right: 0%;
z-index: 100;
}
#access a {
padding-top: 15px;
padding-bottom: 11px;
}
#access a {
font-size: 4.5vw;
}
The class .culture appears to have a margin top on it of 30px. If you remove that, it should fix it.
Looking at the css stylesheet it seems like the id (#access a) is being overruled by this line of css:
NAV DIV UL LI.page_item.page-item-1145 A.
You could add !important to #acess a or you could alter the class NAV DIV UL LI.page_item.page-item-1145 A to control the font size within the menu bar.
On my homesite I have slideshow with cars. My problem is, that slideshow is on the next line (or block I should say) under paragraph "Vitajte!". I want that slideshow next to paragraph "Vitajte!" on the right side. Here is link on my CSS. Thx for help :)
Just add:
float:left;
to div#welcome;
div#welcome
{
float: left;
}
Add the above css to the div, which will bring your slider to right side. If you want to move the slider little down and move left add
.ppy-placeholder
{
margin-top: 55px !important;
width: 450px !important;
}
I suggest you to make the below changes to your CSS and get the paragraph to align right.
The CSS:
div#welcome {
display: inline;
height: 148px;
margin-top: 0;
text-align: right;
width: 290px;
}
EDIT
If you want to keep the paragraph to the same place and move the slideshow inline with the paragraph, you need to add a float:left to the div#welcome
For Instance,
div#welcome {
float:left;
}
Hope this is what you are looking for.
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.