Footer full width

Hi there,

By default this theme displays only 3 widgets, so to add a 4th widget will require the help of a web designer to edit the source files to add a 4th widget area. There is not a simple way to do this without coding it directly.

however, if you wish to make the existing 3 widgets wider, that is a simpler task. You can do that by adding the following custom CSS to your site:

.widget-area .wrap {
    max-width: unset;
}

Hope that helps. Please let us know if you have any more questions.

@jerrysarcastic thanks, it worked. Yes, I need one more small help. On same website, in header menu, when you hover or click, it shows light grey color (hover, click effect). We don’t want any background color change on hover or click, we would like to have the menu item in bold font when it is clicked. Can you please kindly guide me with the CSS code for that ?

Another thing linked to it, once the menu item is bold after clicking, will it change the alignment of other menu items because it is taking more space ?

I would be grateful. Thanks ??

Hey there!

That shouldn’t be a problem, so the CSS you would need for that is:

.main-navigation a:hover {
   background-color: #333333
}

.current_page_item {
    font-weight: 700;
}

.main-navigation a:hover {
    font-weight: 700;
}

Also you can also seek help via https://wordpress.com/help/contact as it looks like the site is hosted with WordPress.com. ??

Thanks @aleone89 It worked. However, after clicking the menu when it lands to the page, we want it to remain bold with no background. Can you please assist with CSS code for that ?

https://cyclotron.stanford.edu/Research-crf/

Also, if you see the footer, the footer widgets are wide as per @jerrysarcastic help which is good but are not aligned from bottom. Can you please assist me with CSS code to align the widgets ?

Yes, it is hosted there but the theme is Lodestar. That’s why they told me to post here.

The code is similar; you would want to select the current menu item like this:

.main-navigation ul li.current-menu-item>a {
    font-weight: 700;
    background-color: transparent;
}

Re: aligning the widgets from the bottom, again that’s something that’s a bit more complex for this particular theme. You could hire a developer to do some custom work for you, but I think you’d find it looks a bit off. You could call less attention to the bottom alignment though, if you wanted to, by hiding the dark bar that underscores it. Its content is already hidden anyway:

.site-info {
    display: none;
}

Going forward, for small changes like text-weight and background color and what not, you might want to get to know your theme’s CSS so you can see how to make these changes on your own. There’s a handy tutorial here:
https://wordpress.com/support/custom-design/how-to-find-your-themes-css/

Hoping this helps!

Thanks, it worked perfectly. One last thing: https://cyclotron.stanford.edu/

On menu bar in header, when I open any page, the menu item is bold with no background which is perfect but when I move my mouse (like hover over without clicking), it shows a grey box.

For example, on home page, when I hover mouse on “Home” menu item, it shows grey box. It only shows for any opened (or any currently viewed page, e.g. same as when you open services or team any other)

Can you please help me with that ? This is the last help I need ??

@supernovia @aleone89 @jerrysarcastic many thanks in advance

Thanks
Noeen

Hello Noeen,

On menu bar in header, when I open any page, the menu item is bold with no background which is perfect but when I move my mouse (like hover over without clicking), it shows a grey box.

The CSS you would need for that is:

.main-navigation ul li.current-menu-item>a:hover {
    background-color: #333;
}

Thanks @aleone89 it worked perfectly fine ??

I am sorry to bother again for one last thing:
https://cyclotron.stanford.edu/

In footer, we would like to have same background (greyish black) and white font. Can you please assist me with that CSS code too ?

This is really the last request ??

It can be done, but it might make the logos there too hard to see:

.site-footer .widget-area {
    background-color: #333333;
}

.site-footer .widget-area, .site-footer .widget-area a {
    color: #ffffff;
}

Did you get a chance to work through the video in this link? It will help with any other last things that might come up, and I think you’ll find it empowering, too:
https://wordpress.com/support/custom-design/how-to-find-your-themes-css

Thanks @supernovia ?? much appreciated !!! Yes, I have looked into it before but in inspector view, I could not find for footer. May be, I need to watch some tutorials as where I can find coding for footer widgets. Because I am not familiar with more about footer.

Though, it is not really needed but if it is possible and feasible, can you please provide me CSS code to remove white bottom border for navigation widget in footer ?
https://cyclotron.stanford.edu/

Also, for bold font hover effect for this navigation widget menu in footer ?

Thanks and really much appreciated !! @supernovia @aleone89 ??

Hello again!

To remove the border – this CSS, should do the trick:

.widget ul li {
    border-bottom: 0px solid #ddd;
    border-top: 0px solid #ddd;
}

And to bold that on hover, you would need:

.widget ul li a:hover {
    font-weight: 700;
}

Thanks @aleone89 it worked. However, after removing bottom border for navigation menu widget in footer, there Wwas a gap between navigation menu and news box, so, I put the navigation menu on a cover.

Can you please help with the CSS code for changing background color and font color of submenu in this navigation widget in footer ?

https://cyclotron.stanford.edu/

Thanks

Best
Noeen

I’m not sure I understand what you are trying to change, can you clarify?

Also I noticed that cyclotron.stanford.edu is currently hosted at WordPress.com have you considered using the included live chat support here? https://wordpress.com/help/contact

Let me get back to you

• This reply was modified 2 years, 4 months ago by noeen.
• This reply was modified 2 years, 4 months ago by noeen.
• This reply was modified 2 years, 4 months ago by noeen.