Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Limit page max-width and center the top menu and header image (http://forum.bytesforall.com/showthread.php?t=24062)

Steve700 Jul 3, 2019 06:37 PM

[SOLVED] Limit page max-width and center the top menu and header image
 
I tested my site on a large screen and it didn't look right. So I used the Style and configure Layout option and set the max width to 1920. This worked fine except the header image is justified left even though I pick centered in header image alignment window and the menu bar extends across the whole screen.
I've tried various combination of settings but no luck.

If I inspect the page and manually set the first element to:
max-width: 1920px;
margin-left: auto;
margin-right: auto;

everything works fine except the header logo image is left instead of centered. What can I add stilll center the image?

juggledad Jul 4, 2019 11:54 AM

What is the site?
Please export your ayahuasca settings and attach them to a response.

Steve700 Jul 5, 2019 07:22 AM

1 Attachment(s)
https://familyhistories.us

Using Firefox Inspector I set the element. Should not have used the term first element.

Steve700 Jul 5, 2019 08:38 PM

1 Attachment(s)
I messed around for a while and came up with some settings that helped. There is probably a better way to do this but it seems to get the job done. (see attachment-updated)

Let me know what you think and thanks for taking a look.

juggledad Jul 6, 2019 09:46 AM

1 Attachment(s)
You might want to read the last part of this option:

Steve700 Jul 7, 2019 03:00 PM

Thank you I did read that. The problem is with large displays, content created for smaller ones does not look right.

Even if you use rotating images, you can go to Style and configure layout and set Layout MAX width to what you want, such as 1920. Then go to Add HTML/CSS inserts and enter the code below (change 1920 to the display size you want).

Code:

div.header-image-container-pre {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

The image will be moved to the right so the left side is aligned with your layout. Even if you don't use the MAX layout option, set max-width to the width of your image and it will move to the center, provided the image width matches the number you use.

If you are using a full width fixed menu you can add to code below to set the width to match.
Code:

div#menu1 ul.rMenu {
    max-width: 1920px;
}


juggledad Jul 9, 2019 04:14 AM

Very nice solution!


All times are GMT -6. The time now is 08:07 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.