Guest Posted January 20, 2021 Share Posted January 20, 2021 (edited) Site URL: https://www.mb-photo.com/ Hello ! I'm new to CSS code, and conding in general, so I want to apologize myself by advanced for my shortcomings. My problem is that I want my logo and navigation-links to be centered each other regardless of the customer's screen size. I started coding the CSS part of my website on a 13" Macbook laptop, and now when I look to my website on a 27" screen the navigation-links aren't centered with the logo's website anymore. There is an exemple of what I was trying to achieve in order to guide me in the CSS jungle : https://jbivphotography.com/ Anyone have an idea of how I can resolve this problem ? Cordially, Quentin from France. ps : I only have the lowest subscription... so I can't use code injection and other stuff. Here is my custom CSS code : // Header double navigation // .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex-basis: 100% !important; align: center !important; height: 10px !important; } .header-title-logo img { margin-bottom:-115px !important; transition: 0.4s; animation: delay-animation-slow 2s; -webkit-animation: delay-animation-slow 2s; } .header-title-logo:hover img { margin-bottom:-110px !important; filter: drop-shadow(5px 5px 8px #000000); transition: 0.4s; } .header-nav-item { top: 10px !important; letter-spacing: .15em !important; animation: delay-animation-slow 2s; -webkit-animation: delay-animation-slow 2s; } .header-nav-item:nth-child(1){ margin-left: -2.3vw !important; } .header-nav-item:nth-child(4){ margin-left: 22vw !important; } .header-nav-item--active a { background: none !important; } // Header underline effect // .header-nav-item::after { content: ''; background: white; height: 1px; width: 0; display: block; margin-top: 8px !important; transition: width 0.3s; margin: 0 auto; } .header-nav-item:hover::after { width: 90%; } .header-nav-item--active::after { content: ''; background: white; height: 1px; width: 90%; display: block; } // Header underline effect // .header-nav-item::after { content: ''; background: white; height: 1px; width: 0; display: block; margin-top: 8px !important; transition: width 0.3s; margin: 0 auto; } .header-nav-item:hover::after { width: 90%; } .header-nav-item--active::after { content: ''; background: white; height: 1px; width: 90%; display: block; Edited January 20, 2021 by MBphoto Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 Hi. It looks like you solved this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted January 24, 2021 Share Posted January 24, 2021 Hi tuanphan! Looks like it, but it's not ... Yes the logo and the navigation-link are horizontally centered. But if we extend the window or on the the contrary we reduce it, the logo still in place while navigation-link goes up or down depending on the screen size. What I would like to get is that the navigation-link stay in place regardless of the screen size, or something close to it will do the job too. My main concern is that the logo and the navigation-link position remain consistant, with the maximum compatibility, according to the different sizes of screens that our customers use. Thanks a lot for your response. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment