Archived topic
Cenetering Nav Menu Item Titles in center of Background image
5 replies · Started by John on May 28, 2021
Hello people,
Just wondering if someone can help me fix the Menu items in the nav bar to the center of the clouds which I have positioned behind them?
I have been creating space between the words by adjusting: Layout < Primary Navigation < Menu Item width
This though, moves the words left/right of center of the clouds.
Is there a way to fix them so that is not happening, and they remain in the middle.
What css can I target to do this?
Would I need to target each cloud element individually?
Many thanks!
Hi there,
you could try setting the background position:
.main-navigation .main-nav ul li a {
background-position: center center;
}Looks like you have already figured out point 2 - as i am seeing the use of nth-child selectors... let me know.
Ah yes - thank you - I have been playing around with that a little and figured out that I need to have better shaped images so the code can be applied in unison.
Is there an article on how best to style the drop down sub menus?
Currently the clouds I am using are skewed left/right.
Or even to possibly just disable the image background on sub menus?
And I have also noticed that if I apply background position to each individual child element, the background image is being cut off by some container or some such.
Is it possible to fix that with z-index or am I missing something completely?!
Cheers
JOhn
You could try this method instead of targeting each individual element:
@media (min-width: 769px) {
/* relative position menu items */
.main-navigation .main-nav>ul>li>a {
position: relative;
}
/* Add pseduo element for cloud background - centered */
.main-navigation .main-nav>ul>li>a:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 100%;
height: 100%;
display: block;
background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1717049.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-31.png);
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
}
/* Adjust veertical position of last 2 longer text elements */
.main-navigation .main-nav>ul>li:nth-last-child(-n+2)>a:before {
top: calc(50% - 5px);
}
}thanks David,
yes - I have hacked that around a little and come up with the desired reult.
Many thanks!
One final thing - does does not seem to have an effect for the dropdown Sub menu elements.
Is it possible to add a cloud to those too using similar adjustable pseudo element code?
Thaknsagain!
One final thing – does does not seem to have an effect for the dropdown Sub menu elements.
Is it possible to add a cloud to those too using similar adjustable pseudo element code?
Definitely possible.
David's CSS specifically targets the parent elements only but if you must target all the links within the menu, you can add in separate styling for the sub menus as well.
Example:
@media (min-width: 769px) {
.main-navigation ul ul,
.main-navigation .main-nav ul ul li a {
box-shadow: unset !important;
background-color: transparent !important;
}
/* relative position menu items */
.main-navigation .main-nav ul ul li a {
position: relative;
line-height: 60px;
}
/* Add pseduo element for cloud background - centered */
.main-navigation .main-nav ul ul li a:before {
content: '';
position: absolute;
width:100%;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 100%;
height: 100%;
display: block;
background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1717049.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-31.png);
background-size: contain;
background-repeat: no-repeat;
z-index: -1;
}
/* Adjust veertical position of last 2 longer text elements */
.main-navigation .main-nav ul ul li:nth-last-child(-n+2):hover a:before {
top: calc(50% - 5px);
}
}