menu alignment- wordpress - css

I have a problem with one menu item that appears to be left-aligned rather than centered as the rest of the menu items.
link to site
You can see that there is a smaller space between the first and second menu items. (site is RTL so first from the right)
Can anyone help me solve this?

Your stylesheet contains the following:
.fl-page-nav-left .fl-page-nav ul.navbar-nav>li:first-child a {
padding-left: 0;
}
You can find this in your stylesheet and remove it.
Alternatively, you can add the following CSS:
.fl-page-nav-left .fl-page-nav ul.navbar-nav>li:first-child a {
padding-left: 25px !important;
}

Your first menu item (from the right) has been styled with the following CSS:
.fl-page-nav-left .fl-page-nav ul.navbar-nav > li:first-child a {
padding-left: 0;
}
This piece of css is used for a styling in a non-RTL website; the padding is on the left side of the menu item. Change it to:
.fl-page-nav-left .fl-page-nav ul.navbar-nav > li:first-child a {
padding-right: 0;
}

Related

Skip menu div and show contents

On the WordPress theme I am working on https://themes.getmotopress.com/2019/ the menu turns into a circle and excess menu items are put into this when the screen resolution decreases.
I would like to stop <div class="main-menu-more"> from showing and all elements become listed in the main container. I have used the code
.main-navigation .main-menu-more {
display:none;
}
Which hides the more menu however the elements inside do not show?
Try this style I hope this will work for you but you should have to upgrade style according to your requirement
#media (max-width:500px){
.submenu-expand{
display: none;
}
.main-navigation .sub-menu {
background-color: transparent;
position: relative;
opacity: 1;
left: 0;
}
.main-navigation .sub-menu > li > a, .main-navigation .sub-menu > li > .menu-item-link-return {
color: #0073aa;
}
.sub-menu:hover{
position: relative;
}
}
I checked out the source codes of the WordPress you are currently working and determined that by deleting the word "toggle" from class="submenu-expand main-menu-more-toggle is-empty" which will become class="submenu-expand main-menu-more is-empty" will no longer hide the menus in the circle, but will simply become part of the responsive webpage.
The code came from the button section of your WordPress. Simply search for the class attribute with a value of "submenu-expand main-menu-more-toggle" using the search function on your text editor and delete the word "toggle" from it. It worked for me.
Let me know how it went.

Changing width & centering Wordpress horizontal menu items

I am currently working on the following Wordpress site:
http://2013.whitehallrow.com/
It's obvious that the horizontal menu items are not styled properly. I want the "Media" link to fit on the right side of the navbar; how do I go about changing the width of each item so that they will all fit?
I also want the menu items to be centered, so that the margins on each side are equal. My knowledge of the existing Wordpress theme's CSS is sketchy; could anyone give me some guidance?
This is a little "dirty", because it is specific for your menu and for names that have been included in it. But maybe is useful:
.main-navigation li {
margin: 0 30px 0 0;
position: relative;
}
/* For the distance of the first element */
main-navigation li:first-child {
margin-left: 50px;
}
/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
margin-left: 0;
}
Of course you can do that.
Look in menu css file and find .your_menu_name li a section. Here look for padding and just adjust size.
For ex. if is padding-left:30px; replace 30 with 10 and see you working menu.
You can customize to by adding hover condition like background-color:#CCCCCC;
You can select each menu item by using CSS3 pseudo class :nth-child(N), refer this. Eg.:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
To align your menu to center you have to change your css in style.css (line no: 1460) to following
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: 1px solid #8293FF;
border-top: 1px solid #8293FF;
display: table;
text-align: center;
width: 100%;
}

Wordpress .sub-menu different background image for each link

I have a bunch of images named after my pages in wordpress. Example:
page name : heart-health
image name : heart-health.png
My main menu has 1 sub-menu level and for each page name in a sub-level I would like to display the image as a background image set to the left. I have tried so many different ways but had no luck.
I know you can add custom text to the menu in the admin but I wish for it all to be done automatically.
I have found the start and end for sub level menu items in "nav-menu-template.php" & "class-wp-walker.php"
At the moment I just have the same picture showing on all sub menu items when you rollover but that is just using CSS.
.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}
Any help or advice would be much appreciated.
The best way to do it is via CSS.
For example
.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }
You can set custom classes for each menu item in the WordPress menu management, just make sure the "CSS Classes" checkbox in "Screen Option" (top right of page) is checked.
Also, to make things easier, I would suggest making an image sprite of all the images you'll be using in the menu so that your CSS code is much simpler.
.menu ul ul a {
background:url('/url-to-sprite.png') no-repeat 0px 0px;
}
.menu ul ul :hover a {
background-position:-20px 0px;
}
.menu ul ul .custom-class a {
background-position:0px -20px;
}
.menu ul ul .custom-class:hover a {
background-position:-20px -20px;
}

WordPress TwentyTwelve Custom Menu current-menu-item styling

I'm trying to style a custom menu in the sidebar of a child theme of
WordPress' TwentyTwelve theme.
I'm trying to give a current menu item a grey background.
Unfortunately the "parent" menu item somehow gives the background-color to an area much wider than only the current li menu item.
I'm now using this css code:
.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
To give an example/show what I mean: I'm trying to accomplish it on http://populair.eu, you see on the front page that the menu item "populair" also give a grey background around the image above. The sub menu items are ok.
the weird thing is that it runs ok on my localhost.
I have the feeling that if there would be a < br /> between the < asides> it would be solved but somehow im probably missing something.
Has anyone experience with this? / How it should be styled?
You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. Also, on your ".menu li a" you may have to "display: block" and "clear: both;". The bigger area is a floating problem.
The best thing for you to do is use either Google Chrome's inspect element software or use Firefox's firebug and select the item, while using either of these you can change the CSS code live. This means that while you are looking at the bit you want to change you can change the code and it will reflect in a way you can see it, you will however need to make these changes in your style.css file on your child theme.
Take a look at the menu that is currently on my website www.driftedmass.co.uk, if that is the kind of thing you are looking for then get in touch with me via the contact form on my site.
If you are wanting to bring down the size of the menu you might need to do something like this (were the <<<< that is the bit you need):
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
>>>> display: inline !important; <<<<<<<<
text-align: center;
width: 100%;
background: transparent;
border-color: #ff0000;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background-color: #ffffff;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
The bit with the arrows would have originally looked like this:
display: inline-block !important;
I hope this sort of helped you out a little bit.

Page menus are jumping on hover

When hovering on my second menus (can be found there: http://justxp.plutohost.net/survive/index.html)
the items are jumping.
It happened once I added a background with padding to them, well that's what it needs to have, but it should just appear, not jump?
My code:
HTML + CSS can be found here:
http://pastebin.com/cbLDRefB
thanks.
For not jumping you should not change the size of the elements on hover
you have
.nav6 a:hover {
padding: 21px;
}
so you need to add padding to the all links not only :hover
.nav6 a {
padding: 21px;
}

Resources